Second dropdown shows 0,1,2 instead of html,css,js Can u help how to display these (html,css,js) in code. I tried doing multiple things but couldnt get solution to this. Is it the mistake with html or the script involvced in it . I basically changed this from w3 schools three dropdown code to two, but it doesnt seem to work
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
"Front-end": [
"HTML",
"CSS",
"JavaScript"
],
"Back-end": [
"PHP",
"SQL"]
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
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);
}
}
}
</script>
</head>
<body>
<h1>Cascading Dropdown Example</h1>
<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>
</form>
</body>
</html>var subjectObject = {
"Front-end": [
"HTML",
"CSS",
"JavaScript"
],
"Back-end": [
"PHP",
"SQL"]
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
}
</script>
</head>
<body>
<h1>Cascading Dropdown Example</h1>
<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>
</form>
</body>
</html>
<!-- end snippet -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
"Front-end": [
"HTML",
"CSS",
"JavaScript"
],
"Back-end": [
"PHP",
"SQL"]
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
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);
}
}
}
</script>
</head>
<body>
<h1>Cascading Dropdown Example</h1>
<form name="form1" id="form1" action="/action_page.php">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">Please select subject first</option>
</select>
</form>
Advertisement
Answer
Simple, you are using the index for both values, instead you should use the index to grab the value from the array – use it as the array’s index again:
Also, use the .add() function of a select to more easily add options.
Finally, I created a holder variable to reset the select to the “please select a subject” so you can remove it entirely when that IS selected – less confusing UI for the user.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var subjectObject = {
"Front-end": [
"HTML",
"CSS",
"JavaScript"
],
"Back-end": [
"PHP",
"SQL"]
},
topicDefaultOption = new Option("Please select subject first", "");
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
topicSel.length = 0;
//chapterSel.length = 1; //not found :(
if(this.value === "") {
topicSel.options.add(topicDefaultOption);
} else {
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options.add(new Option(subjectObject[this.value][y], y));
}
}
}
}
</script>
</head>
<body>
<h1>Cascading Dropdown Example</h1>
<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>
</form>
</body>
</html>