我有2个下降，这里的事情是当用户选择宝马我想填写数据1,2,3,4,5当他选择沃尔沃我想要显示5,6,7,8,9。数据在第二次下拉中填充，但我也能看到旧数据，并且我点击列表的次数也越来越多。我想只显示选择和数据的具体数据也不应该重复。以下是我的方法。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("mySelect").value;
if(x=='BMW'){
var select = document.getElementById("participant");
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
if(x=='Volvo'){
var select = document.getElementById("participant");
var options = ["6", "7", "8", "9", "10"];
console.log(options)
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
}
</script>
</head>
<body>
<select id="mySelect" onchange="myFunction()">
<option value="" disabled selected>Select Type</option>
<option value="BMW">BMW</option>
<option value="Volvo">Volvo</option>
</select>
<br><br>
<select id="participant">
<option>select</option>
</select>
</body>
</html>
你应该在添加新的innerHTML之前更改<select>的<option>。
function myFunction() {
var x = document.getElementById("mySelect").value;
var select = document.getElementById("participant");
//this line clears the old data.
select.innerHTML = '<option>Select</option>'
if(x=='BMW'){
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
if(x=='Volvo'){
var options = ["6", "7", "8", "9", "10"];
console.log(options)
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
}<select id="mySelect" onchange="myFunction()">
<option value="" disabled selected>Select Type</option>
<option value="BMW">BMW</option>
<option value="Volvo">Volvo</option>
</select>
<br><br>
<select id="participant">
<option>select</option>
</select>