如何根据先前的选择标签重置选择中的默认值？

Question

我有两个选择：

<select id="Living things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>

<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>

考虑两个下拉菜单中的第一个选项是默认的。 现在想象一下，我从第一个中选择了“动物”，从第二个中选择了“少”。 现在，如果我将第一个更改为“植物”，那么第二个列表应该重置。即，

<option>Any</option>
<option>less</option>
<option>greater</option>

请帮忙解决这个问题。谢谢。

Answer 1

<select id="livingThings" onchange="reset();">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>

<select id="compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
<script src="test.js"></script>

livingThings = document.getElementById('livingThings');
compare =document.getElementById('compare');

function reset(){
if (livingThings.selectedIndex != 0){
compare.selectedIndex = 0;
}
}

Answer 2

您可以在第一个 select 元素发生更改时为其添加事件侦听器，然后将第二个 select 元素的值重置为其默认值，请注意 ID 不能有空格，我在其中添加了一个破折号

 document.querySelector("#Living-things").onchange = function() { let select = document.querySelector("#Compare"); select.value = select.children[0].value; }

 <select id="Living-things"> <option>Choose Any</option> <option>Animals</option> <option>Plants</option> </select> <select id="Compare"> <option>Any</option> <option>less</option> <option>greater</option> </select>