कैसे करें - कैस्केडिंग ड्रॉपडाउन सूची
जावास्क्रिप्ट के साथ कैस्केडिंग ड्रॉपडाउन सूची बनाने का तरीका जानें।
तीन ड्रॉपडाउन सूचियां बनाएं
HTML फॉर्म के अंदर तीन ड्रॉपडाउन सूचियां बनाएं।
दूसरी और तीसरी ड्रॉपडाउन सूची पेरेंट ड्रॉपडाउन सूची में चयनित मान के आधार पर विभिन्न विकल्प प्रदर्शित करेगी।
चरण 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) जावास्क्रिप्ट जोड़ें:
उदाहरण
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]);
}
}
}
युक्ति: ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे सीएसएस ड्रॉपडाउन ट्यूटोरियल पर जाएं।
युक्ति: होवर करने योग्य ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे होवरेबल ड्रॉपडाउन पर जाएं।