چگونه ایجاد میکنند: لیستهای فلی پیچیده
- پچھلے پیج ڈاؤن لاس منو پر کلک کرنا
- پائیدہ پیج باریک ناویگیشن بار میں ڈاؤن لاس منو
یاد بگیرید که چگونه با استفاده از JavaScript لیستهای فلی پیچیده (کاسکاد) ایجاد کنید.
سه لیست پایینتر ایجاد میکنند
سه لیست پایینتر در داخل فرم HTML ایجاد میشوند.
دو لیست پایینتر گزینههای مختلفی را نشان میدهند، که بستگی به گزینه انتخاب شده در لیست اول دارد.
قدم اول - اضافه کردن HTML:
<form name="form1" id="form1" action="/action_page.php"> موضوعات: <select name="subject" id="subject"> <option value="" selected="selected">موضوع را انتخاب کنید</option> </select> <br><br> موضوعات: <select name="topic" id="topic"> <option value="" selected="selected">لطفاً موضوع را اول انتخاب کنید</option> </select> <br><br> فصلها: <select name="chapter" id="chapter"> <option value="" selected="selected">لطفاً موضوع را اول انتخاب کنید</option> </select> <br><br> <input type="submit" value="Submit"> </form>
دوماً - اضافه کردن JavaScript:
var subjectObject = { "Front-end": { "HTML": ["رابط", "تصویر", "جدول", "لیست"], "CSS": ["Borders", "Margins", "Backgrounds", "Float"], "JavaScript": ["Variables", "Operators", "Functions", "Conditions"] }, "Back-end": { "PHP": ["Variables", "Strings", "Arrays"], "SQL": ["SELECT", "UPDATE", "DELETE"] } } window.onload = function() { var subjectSel = document.getElementById("subject"); var topicSel = document.getElementById("topic"); var chapterSel = document.getElementById("chapter"); برای (var x in subjectObject) { subjectSel.options[subjectSel.options.length] = new Option(x, x); } subjectSel.onchange = function() { // “چپتر” اور “موضوع” دراہل منشی کریں chapterSel.length = 1; topicSel.length = 1; // درست مقدار نمائش برای (var y in subjectObject[this.value]) { topicSel.options[topicSel.options.length] = new Option(y, y); } } topicSel.onchange = function() { // “چپتر” دراہل منشی کریں chapterSel.length = 1; // درست مقدار نمائش var z = subjectObject[subjectSel.value][this.value]; برای (var i = 0; i < z.length; i++) { chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]); } } }
مرتبطہ صفحات
تدریس:CSS کا ڈاؤن لاس منو
- پچھلے پیج ڈاؤن لاس منو پر کلک کرنا
- پائیدہ پیج باریک ناویگیشن بار میں ڈاؤن لاس منو