javascript - 如何根据 'Dropdown B' 上选择的选项禁用 'Dropdown A' 的某些选项？

Question

我对此很陌生，所以如果我的问题没有按应有的方式提出，我深表歉意。

基本上，我使用 jQuery 的目的是，当从第一个下拉框中选择名为“Apple”的字段时，第二个下拉框将只允许选择“Firm”字段，而其他两个字段将被选中。被禁用。但是，如果从第一个下拉框中选择了“Apple”以外的任何其他水果，则第二个下拉框中(纹理下拉列表)中的所有选项都可供选择。

我在互联网上查找了 jQuery 代码来帮助我解决这个问题，但由于我是 jQuery 新手，我很难找到我需要的解决方案。

这是我的 HTML 代码:

<div class="ingredients_div">

   <select name="ingredients_form" id="ingredients_form_1">

      <option value="Apple" selected="">Apple</option>

      <option value="Orange">Orange</option>

      <option value="Lemon">Lemon</option>

      <option value="Mango">Mango</option>

   </select>

</div>


<div class="texture_div">

   <select name="texture_form" id="texture_form_1">

      <option value="Firm" selected="">Firm</option>

      <option value="Soft">Soft</option>

      <option value="Blended">Blended</option>

   </select>

</div>

非常感谢

Answer 1

请检查此代码，我认为它适合您。

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value="1">Apple</option>
  <option value="2">Orange</option>
  <option value="3">Lemon</option>
</select>


<select name="select2" id="select2">
  <option value="1">Firm</option>
  <option value="2">Soft</option>
  <option value="3">Blended</option>
 
</select>