javascript - 如何实时检查是否选择了第一个下拉列表

Question

您好，我需要的是，如果未选择第一个，则禁用第二个，如果选择则启用

这里是代码:

function checker() {
  if ($('#car option:selected').val() === '') {
    $('#car-model').prop('disabled', true);
  } else {
    $('#car-model').prop('disabled', false);
  }
}
checker();

select{
  width: 100px;  
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='car'>
  <option></option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select id='car-model'>
  <option></option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Answer 1

在汽车选择上定义更改事件监听器并检查所选选项。

我还添加了 $("#car-model").val($("#car-model option:first").val()); 来重置第二个选择值

更新了帖子以使用自调用函数在加载时执行

$("#car").change(function(){

checker();

});

var checker =  (function checker1() {

  if ($('#car option:selected').text() == '') {
    $('#car-model').prop('disabled', true);
    $("#car-model").val($("#car-model option:first").val());
  } else {
    $('#car-model').prop('disabled', false);
  }
  
  return checker1;

})();

select{
  width: 100px;  
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id='car'>
  <option></option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

<select id='car-model'>
  <option></option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>