Как отключить определенные опции «Dropdown B» в зависимости от параметра, выбранного в «Dropdown A»?

Question

Im новое к этому так извиняюсь если мой вопрос не представлен как оно должно быть.

В основном, моя цель заключается в том, чтобы сделать это так, чтобы при выборе поля «Яблоко» из первого раскрывающегося списка второе раскрывающееся поле разрешало выбирать поле «Фирма», а другое два должны быть отключены. Однако, если какой-либо из других фруктов, кроме «Яблока», выбирается из первого раскрывающегося списка, тогда будут доступны все параметры во втором раскрывающемся списке (раскрывающийся список текстур).

Я искал по всему миру код 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, чтобы узнать больше о селекторов, связывающих событие, а самое главное, в следующем посте, включают в себя то, что вы достигли до сих пор.