如何根据在“下拉列表 A”上选择的选项禁用“下拉列表 B”的某些选项？

Question

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

基本上，我使用 jQuery 的目的是使当从第一个下拉框中选择名为“Apple”的字段时，第二个下拉框将只允许选择字段“公司”而禁用其他两个字段。 但是，如果从第一个下拉框中选择了除“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>

Answer 2

要实现您提到的内容，您需要在第一个选择框上使用 jQuery 的事件绑定。 一旦更改了值，您需要编写逻辑以根据第一个框中更改的值在第二个选择框中启用/禁用选项。

这是您如何实现它。

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

  if ($(this).val() === "Apple") {
    $("#texture_form_1 option").prop("disabled", true);
    $("#texture_form_1 option[value='Firm']").prop("disabled", false);
  } else {
    $("#texture_form_1 option").prop("disabled", false);
  }

});

请阅读 jQuery 的文档以了解更多关于选择器、事件绑定的信息，最重要的是，在下一篇文章中，包括您在此之前取得的成就。