javascript - 设置取决于另一个下拉列表的选择选项值？

Question

我有两个选择下拉列表，如下所示。在这里，我希望当我从第一个下拉列表中设置年龄 2 时，然后在第二个下拉列表中设置年龄应该从 3 岁开始。我该怎么做？

<select onclick="getAgevalue('age1','age2')" class="select1" id="age1" <?php if($var=='1') {} else { echo ' disabled="disabled"';}?>>
<option><1</option>  
<option>1</option>  
<option>2</option>   
<option>.</option>  
<option>.</option> 
<option>20</option> 
</select>

<select class="select2" id="age2" <?php if($var=='1') {} else { echo ' disabled="disabled"';}?>>
<option><1</option>  
<option>1</option>  
<option>2</option>   
<option>.</option>  
<option>.</option> 
<option>20</option> 
</select>

请尽快回复。

我还可以与任何功能一起使用，因为我必须将它与多个人的年龄一起使用？？？

Answer 1

您可以通过将 onchange 事件设置为第一个下拉列表，然后将第一个下拉列表值与第二个下拉列表所有值进行比较。如果大于则在网页上显示，否则不隐藏。另外，要在值更改时重置，请添加默认选项值。

var select1 = document.getElementById('age1')
var select2 = document.getElementById('age2')

select1.onchange = function() {
  select2.value = null // reset second dropdown value
  for(var i = 0; i < select2.children.length; i++) {
    if(parseInt(select1.value) >= parseInt(select2.children[i].textContent)) {
      select2.children[i].classList.add('disabled')
    } else {
      select2.children[i].classList.remove('disabled')
    }
  }
}

.disabled {
display: none;
}

<select class="select1" id="age1">
<option value="0"></option>
<option>1</option>  
<option>2</option>   
<option>3</option>  
<option>4</option> 
<option>20</option> 
</select>
<select class="select2" id="age2">
<option></option>
<option>1</option>  
<option>2</option>   
<option>3</option>  
<option>4</option> 
<option>20</option> 
</select>