根据另一个选择标签的输入更改一个选择标签的选项

时间:2018-06-22 11:58:52

标签: jquery html forms html-select

我正在尝试根据第一个选择标签的输入来更改第二个选择标签的选项。

function selectMake() {
  $("#year").change(function() {
    var y = $(this).val();
    if (y == "2018") {
      $("#make").html("<option value='make1'>make 1</option><option value='make2'>make 2</option>");
    } else if (y == "2017") {
      $("#make").html("<option value='make3'>make 3</option><option value='make4'>make 4</option>");
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="js-select2" id="year" name="year[]" oninput='selectMake()'>
  <option value="">Please chooses Year</option>
  <option>2018</option>
  <option>2017</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>


<div class="wrap-input100 input100-select bg1">
  <span class="label-input100">Make *</span>
  <div>
    <select class="js-select2" id="make" name="make[]" oninput="selectModel()">
      <option value="">Please chooses Make</option>
    </select>
    <div class="dropDownSelect2"></div>
  </div>
</div>

我既没有获得所需的输出,也没有得到任何错误。 我的代码有问题吗?我不希望使用document.ready(),因为我必须多次调用此函数。

1 个答案:

答案 0 :(得分:1)

您的代码可与Chrome和其他支持oninput的最新浏览器正常工作。唯一的问题是,它无法在IE 11浏览器中正常工作,以解决您需要使用onchange而不是如下所示的oninput的问题,

<select class="js-select2" id="year" name="year[]" onchange='selectMake()'>
  <option value="">Please chooses Year</option>
  <option>2018</option>
  <option>2017</option>
</select>

我刚刚在其他几种浏览器中进行了验证,它们也可以正常工作