У меня есть 2 выпадающих списка, эта вещь здесь, когда пользователь выбирает BMW, я хочу заполнить данные 1,2,3,4,5, а когда он выбирает Volvo, я хочу отобразить 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>