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

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

＆＃13;

$("#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);
});

＆＃13;

<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>

＆＃13;

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的文档，了解有关选择器，事件绑定的更多信息，最重要的是，在下一篇文章中，包含您在此之前所取得的成就。

如何根据“下拉A”中选择的选项禁用“下拉B”的某些选项？

2 个答案: