时间戳

首页 > 解决方案 > 根据另一个选择标签的输入更改一个选择标签的选项

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

问题描述

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

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()，因为我必须多次调用此函数。

标签： jqueryhtmlformshtml-select

解决方案

您的代码适用于 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>

我刚刚在其他几个浏览器中进行了验证，它们也运行良好

推荐阅读