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>

设置选择选项值取决于另一个下拉菜单？

1 个答案: