我正在创建一个包含两个菜单的依赖下拉菜单。
每当更改第一个菜单中的选项时，第二个的内容都必须更改。
我遵循了两个步骤：
步骤1：从第二个菜单中删除所有选项
第2步：根据第一个菜单中所选的选项，为第二个菜单重新填充。
为了删除所有选项，我编写了以下代码：
var select = document.getElementById('1st_select');
var selected = select.value;
var target = document.getElementById('2nd_select');
var targetLength = target.length
console.log("Length"+target.length);
for (var i = 0; i <targetLength; i++) {
console.log(i);
target.remove(i);
}
上面的代码没有用。当更改第一个菜单中的选项时，某些选项会保留在第二个下拉菜单中。
但是如果我只是将遍历循环从
for (var i = 0; i <targetLength; i++)
至
for (var i = targetLength; i >=0; i--)
它工作正常。
为什么会这样呢？
请尝试仅在Pure / Vanilla Javascript中解释该概念。
代码片段，用于循环遍历的故障。
function show_op(id,lb){
var ops = document.getElementsByClassName('option-contents');
var op = document.getElementById(id);
for (var i = 0; i < ops.length; i++) {
ops[i].style.display='none';
}
op.style.display='block';
var labels = document.getElementsByClassName('option-links');
var label = document.getElementById(lb);
for (var i = 0; i < labels.length; i++) {
labels[i].style.backgroundColor="transparent";
}
label.style.backgroundColor="#cccccc";
}
var productsByCategory = {
A: ["CNC 1", "CNC 2", "CNC 3", "CNC 4"],
B: ["LASER 1", "LASER 2", "LASER 3", "LASER 4"],
C: ["RUBBER 1", "RUBBER 2", "RUBBER 3", "RUBBER 4", "RUBBER 5"],
D: ["PRECISION 1","PRECISION 2","PRECISION 3"]
}
var valuesByCategory = {
A: ["A1", "A2", "A3", "A4"],
B: ["B1", "B2", "B3", "B4"],
C: ["C1", "C2", "C3", "C4", "C5"],
D: ["D1","D2","D3"]
}
console.log(productsByCategory);
console.log(productsByCategory['A']);
for (var i in productsByCategory['B']){
console.log(productsByCategory['B'][i]);
}
function dropdown(){
var select = document.getElementById('1st_select');
var selected = select.value;
var target = document.getElementById('2nd_select');
var targetLength = target.length
console.log("Length"+target.length);
for (var i = 0; i <targetLength; i++) {
console.log(i);
target.remove(i);
}
if (selected==0) {
var option = document.createElement("option");
option.text="Select Product first";
option.value="";
target.add(option);
}
if (selected==1) {
for (var i in productsByCategory['A']){
var option = document.createElement("option");
option.text=productsByCategory['A'][i];
option.value=valuesByCategory['A'][i];
target.add(option);
}
}
else if (selected==2){
for (var i in productsByCategory['B']){
var option = document.createElement("option");
option.text=productsByCategory['B'][i];
option.value=valuesByCategory['B'][i];
target.add(option);
}
}
else if (selected==3){
for (var i in productsByCategory['C']){
var option = document.createElement("option");
option.text=productsByCategory['C'][i];
option.value=valuesByCategory['C'][i];
target.add(option);
}
}
else {
for (var i in productsByCategory['D']){
var option = document.createElement("option");
option.text=productsByCategory['D'][i];
option.value=valuesByCategory['D'][i];
target.add(option);
}
}
}
function dropdown2(){
var select = document.getElementById('2nd_select');
var selected = select.value;
console.log(selected);
}body{
height: 100vh;
margin: 0px;
overflow-y: auto;
font-family: 'Roboto';
}
#clear{
clear: both;
}
.content{
display: flex;
background-color: white;
height: auto;
margin-top: 0px;
font-family: 'Roboto';
z-index: -1;
min-height: 88%;
}
.links{
position: relative;
display: block;
float: left;
width: 30%;
border-style: solid;
box-sizing: border-box;
border-color: black;
line-height: 3;
}
.link-contents{
position: relative;
display: block;
float: left;
left: 0px;
width: 70%;
border-style: solid;
box-sizing: border-box;
border-color: red;
}
.option-links{
display: block;
font-size: 30px;
cursor: pointer;
}
#op1{
background-color: #cccccc;
}
.footer{
display: block;
max-height: 4%;
}
#order_now{
display: block;
}<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="profile.css">
<title></title>
</head>
<body>
<div class="content">
<div class="links">
<span class="option-links" id="op1" onclick="show_op('order_now','op1');">Order new</span><br/>
</div>
<div class="link-contents">
<div class="option-contents" id="order_now">
<select id="1st_select" onchange="dropdown();">
<option value="0">Select</option>
<option value="1">CNS</option>
<option value="2">Laser Cut</option>
<option value="3">Rubber roller</option>
<option value="4">Fixture</option>
</select>
<select id="2nd_select" onchange="dropdown2();">
<option>Select Product first</option>
</select>
</div>
</div>
<div id="clear"></div>
</div>
<div class="footer">
A big thank you to all of you.
</div>
</body>
<script type="text/javascript" src="profile.js"></script>
</html>最佳答案
这是因为使用for (var i = 0; i <targetLength; i++)在目标数组中位于索引i处的选项被替换为i + 1处的选项（因此后面有1个选项）。
例如;
第一次i = 0时，请先将其删除，然后将其删除为target.delete(i)
这将删除索引0处的选项，但索引1（i 1）处的选项现在移至0；然后，JS将前进到下一个循环，在该循环中我变为1，因此跳过其后的选项。
当您从i = targetlength开始时，它将在每个循环中删除最后一个索引，因此不会在目标数组中移动您的选项；