How do I disable certain options of 'Dropdown B' depending on an option selected on 'Dropdown A'?

Question

Im new to this so apologies if my question is not presented as it should be.

Basically, my aim is with jQuery is to make it so that when the field called 'Apple' is selected from the first dropdown box, the second dropdown box will only allow the field 'Firm' to be selected and the other two be disabled. However if any of the other fruits other than 'Apple' is selected from the first dropdown box then all of the options in the second dropdown box (texture dropdown) will be available to be chosen.

I have looked all over the internet for jQuery code to help me with this issue but as I am new to jQuery I have difficulty finding the solution I need.

Here is my HTML code:

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

Many thanks

Answer 1

please check this code , i think it works for you.

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

To achieve what you mentioned, you need to use jQuery's event binding on the first select box. As soon as the value is changed, you need to write logic to enable/disable options in the second select box as per the value changed in the first box.

Here is how you can achieve it.

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

});

Please go through jQuery's documentation to know more about selectors, event binding, and most importantly, in the next post, include what you've achieved till then.