如何使用 javascript 和 html 做两个依赖下拉？
[英]how to do two dependent drop down using javascript and html?
问题描述
Second dropdown shows 0,1,2 instead of html,css,js Can u help how to display these (html,css,js) in code.
第二个下拉菜单显示 0,1,2 而不是 html,css,js 你可以帮助如何在代码中显示这些（html,css,js）。 I tried doing multiple things but couldnt get solution to this.我尝试做很多事情，但无法解决这个问题。 Is it the mistake with html or the script involvced in it.是 html 的错误还是其中涉及的脚本。 I basically changed this from w3 schools three dropdown code to two, but it doesnt seem to work我基本上把它从 w3 school 三个下拉代码更改为两个，但它似乎不起作用
<,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>
2 个解决方案
解决方案1
1 2022-08-24 18:31:41
The problem that you are having is you are treating your array and object loops the same.您遇到的问题是您正在处理您的阵列，并且 object 循环相同。
subjectObject is an object, that has the subjects as the keys. subjectObject是一个 object，它以主题为键。 subjectObject[subject] is an array, that will have numerical keys. subjectObject[subject] 是一个数组，将有数字键。
I updated your code by:我通过以下方式更新了您的代码：
referring to: subjectObject[this.value][y] so that it refers to the string value of that array element and not its position in the array.引用： subjectObject[this.value][y] ，以便它引用该数组元素的字符串值，而不是数组中的 position。
Plus just to simplify your code, I used appendChild to add the options as new option returns a value that can be used via appendChild.另外，为了简化您的代码，我使用appendChild添加选项，因为新选项返回一个可以通过 appendChild 使用的值。
Also, in one of your snippets you are referring to chapterSel but no where are you declaring it.此外，在您的一个片段中，您指的是chapterSel ，但您没有在哪里声明它。
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.appendChild(new Option(x, x)); } subjectSel.onchange = function() { //empty Chapters- and Topics- dropdowns //subjectSel.length = 1; topicSel.length = 1; //display correct values for (var y in subjectObject[this.value]) { topicSel.appendChild(new Option(subjectObject[this.value][y],y)); } } }
<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>
解决方案2
1 2022-08-24 18:34:53
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.此外，使用.add() select可以更轻松地添加选项。
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.最后，我创建了一个持有者变量以将 select 重置为“请 select 成为主题”，这样您就可以在选择该选项时将其完全删除 - 减少用户界面的混乱。
<,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(subjectSel.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.