Блог

Я предварительно заполнил теги тегов select значениями параметров, полученными из переменных PHP, и HTML выглядит следующим образом:

  <!-- Type -->
 <select id="d1">
    <option type="colours" value="Colours">Colours</option>
    <option type="fruit" value="Fruit">Fruit</option>
 </select>
 <!-- Group -->
 <select id="d2">
    <option type="colours_dark" subtype="dark" value="Dark">Dark</option>
    <option type="colours_light" subtype="light" value="Light">Light</option>
    <option type="fruit_ripe" value="Ripe">Ripe</option>
    <option type="fruit_rotten" value="Rotten">Rotten</option>
 </select>
 <!-- Items -->
 <select id="d3" style="display: none;">
    <option value="">Choose a color</option>
    <option type="colours_dark" value="Black">Black</option>
    <option type="colours_dark" value="Brown">Brown</option>
    <option type="colours_dark" value="Grey">Grey</option>
    <option type="colours_light" value="Red">Red</option>
    <option type="colours_light" value="Green">Green</option>
    <option type="colours_light" value="Blue">Blue</option>
    <option type="fruit_ripe" value="Banana">Banana</option>
    <option type="fruit_ripe" value="Apple">Apple</option>
    <option type="fruit_ripe" value="Orange">Orange</option>
    <option type="fruit_rotten" value="Pear">Pear</option>
    <option type="fruit_rotten" value="Peach">Peach</option>
    <option type="fruit_rotten" value="Mango">Mango</option>
 </select>
 

Изначально я не хотел, чтобы отображался третий раскрывающийся список, потому что значения будут зависеть от второго раскрывающегося списка, поэтому я добавил следующее в свой фрагмент jQuery:

 var dropDown1Selected = dropDown1.find('option').filter(':selected').val();
if(dropDown3.find('option').filter(':selected').val() == '') {
   dropDown3.hide();
}
 

Основываясь на моем HTML, как я могу сделать так, чтобы параметры выпадающего списка 2 отображались в зависимости от выпадающего списка 1, а затем отображался выпадающий список 3 в зависимости от выпадающего списка 3?

Например: Если я выберу фрукты из выпадающего списка 1, выпадающий список 2 должен показывать только спелые и гнилые. И если я выберу Спелый, то в выпадающем списке 3 должны отображаться только яблоко и апельсин.

Я попробовал следующее в своем фрагменте jQuery, но изо всех сил пытаюсь изменить раскрывающиеся параметры:

 $('#d1').on('change', function(e) {
    var val = this.value;
    
    // check if val exists in d2 options
    $("#d2 option").filter(function() {
        
    });
    
}).change();
 

Надеюсь, это сработает для вас, я сделаю выпадающий список 3 отфильтрованным с помощью выпадающего списка 2, чтобы вам не нужно было его скрывать

         $(document).ready(function () {
            filterOption("d1", "d2");
            filterOption("d2", "d3");
        })
        $('#d1').on('change', function (e) {
            filterOption("d1", "d2");
            filterOption("d2", "d3");
        })
        $('#d2').on('change', function (e) {
            filterOption("d2", "d3");
        })

        function filterOption(parent, child) {
            var parent = $(`#${parent} :selected`).attr('type');
            $(`#${child} option`).each(function () {
                if ($(this).val() == "" || $(this).attr('type').includes(parent)) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            })
            $(`#${child}`).val($(`#${child} option:visible:first`).val());
        } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Type -->
    <select id="d1">
        <option type="colours" value="Colours">Colours</option>
        <option type="fruit" value="Fruit">Fruit</option>
    </select>
    <!-- Group -->
    <select id="d2">
        <option type="colours_dark" subtype="dark" value="Dark">Dark</option>
        <option type="colours_light" subtype="light" value="Light">Light</option>
        <option type="fruit_ripe" value="Ripe">Ripe</option>
        <option type="fruit_rotten" value="Rotten">Rotten</option>
    </select>
    <!-- Items -->
    <select id="d3">
        <option value="">Choose a color</option>
        <option type="colours_dark" value="Black">Black</option>
        <option type="colours_dark" value="Brown">Brown</option>
        <option type="colours_dark" value="Grey">Grey</option>
        <option type="colours_light" value="Red">Red</option>
        <option type="colours_light" value="Green">Green</option>
        <option type="colours_light" value="Blue">Blue</option>
        <option type="fruit_ripe" value="Banana">Banana</option>
        <option type="fruit_ripe" value="Apple">Apple</option>
        <option type="fruit_ripe" value="Orange">Orange</option>
        <option type="fruit_rotten" value="Pear">Pear</option>
        <option type="fruit_rotten" value="Peach">Peach</option>
        <option type="fruit_rotten" value="Mango">Mango</option>
    </select>