Cascading Dropdown List လုပ်နည်း
JavaScript ဖြင့် cascading dropdown list ဖန်တီးနည်းကို လေ့လာပါ။
Dropdown Lists သုံးခုဖန်တီးပါ။
HTML ဖောင်တစ်ခုအတွင်းတွင် dropdown list သုံးခုဖန်တီးပါ။
ဒုတိယနှင့် တတိယ dropdown list သည် parent dropdown list တွင်ရွေးချယ်ထားသောတန်ဖိုးပေါ် မူတည်၍ မတူညီသောရွေးချယ်မှုများကိုပြသလိမ့်မည်။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<form name="form1" id="form1" action="/action_page.php">
Subjects:
<select name="subject" id="subject">
<option value=""
selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option
value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
အဆင့် 2) JavaScript ကိုထည့်ပါ
ဥပမာ
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"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");
for (var x in subjectObject)
{
subjectSel.options[subjectSel.options.length] = new
Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
chapterSel.length =
1;
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value])
{
topicSel.options[topicSel.options.length]
= new Option(y, y);
}
}
topicSel.onchange = function() {
//empty Chapters
dropdown
chapterSel.length = 1;
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
အကြံပြုချက်- dropdowns များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Dropdowns Tutorial သို့ သွားပါ ။
အကြံပြုချက်- အလျားလိုက်လုပ်နိုင်သော dropdowns များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ Hoverable Dropdowns သို့ သွားပါ ။