Как включить выпадающий список при изменении с помощью jQuery?

Question

Как отредактировать этот код, чтобы сделать select2 и select3 отключенными по умолчанию и включить его, если есть выбор на предыдущем выборке или, возможно, если есть варианты на выборке (исключая «Заполнитель выбора вашего варианта»).

также в этом коде последний вариант, выбранный при выборе предыдущего варианта выбора, вместо этого я хочу, чтобы первый вариант-заполнитель был выбран вместо "Выберите свой вариант-заполнитель"

Ниже мой код

<select name="select1" id="select1">
    <option value="" disabled selected>Select your option</option>
    <option value="1" option-id="1">Group A</option>
    <option value="2" option-id="2">Group B</option>
    <option value="3" option-id="3">Group C</option>
</select>

<select name="select2" id="select2">
 <option value="a" disabled selected option-id="a">Select your option</option>
    <option value="a" option-id="a">Select your option</option>
    <option value="1" option-id="1">Product 1 No Sizes</option>
    <option value="2" option-id="1">Product 2 Standard and large</option>
    <option value="3" option-id="2">Product 3 Small and Standard</option>
    <option value="4" option-id="2">Product 4 Standard and Large</option>
    <option value="5" option-id="3">Product 5 No Sizes</option>

</select>

<select name="select3" id="select3">
    <option value="a" disabled selected option-id="a">Select your option</option>

    <option value="bb" option-id="1" >Standard</option>

    <option value="bb" option-id="2" >Standard</option>
    <option value="cc" option-id="2" >Large</option>

    <option value="aa" option-id="3" >Small</option>
    <option value="bb" option-id="3" >Standard</option>

    <option value="bb" option-id="4" >Standard</option>
    <option value="cc" option-id="4" >Large</option>  

    <option value="cc" option-id="4" >Large</option>  

    <option value="cc" option-id="4" >Large</option>  

</select>

var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $select3 = $( '#select3' ), // I added that line but not sure if its correct

    $options_a = $select2.find( 'option' ),
    $options_b = $select3.find( 'option' ); // I added that line but not sure if its correct

$select1.on( 'change', function() {

  $select2.html( $options_a.filter( '[option-id="' + this.value + '"]' ) );
} ).trigger( 'change' );

// I added the next lines for select3 but not sure if they are correct
$select2.on( 'change', function() {
  $select3.html( $options_b.filter( '[option-id="' + this.value + '"]' ) );

} ).trigger( 'change' );

https://jsfiddle.net/arabtornado/up738s1x/27/

То, что я ищу, это что-то вроде этого https://www.jqueryscript.net/demo/Multilevel-Dependent-Dropdown-Plugin-With-jQuery-Dependent-Dropdowns/

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

спасибо

Answer 1

Если я правильно понимаю, что вы просите. Это должно сделать работу. Вам не нужен этот CSS для этого.

    <select name="select1" id="select1">
        <option value="" disabled selected>Select your option</option>
        <option value="1" option-id="1">Group A</option>
        <option value="2" option-id="2">Group B</option>
        <option value="3" option-id="3">Group C</option>
    </select>

    <select name="select2" id="select2" disabled>
     <option value="a" disabled selected option-id="a">Select your option</option>
        <option value="1" option-id="1">Product 1 No Sizes</option>
        <option value="2" option-id="1">Product 2 Standard and large</option>
        <option value="3" option-id="2">Product 3 Small and Standard</option>
        <option value="4" option-id="2">Product 4 Standard and Large</option>
        <option value="5" option-id="3">Product 5 No Sizes</option>

    </select>

    <select name="select3" id="select3" disabled>
        <option value="a" disabled selected option-id="a">Select your option</option>

        <option value="bb" option-id="1" >Standard</option>

        <option value="bb" option-id="2" >Standard</option>
        <option value="cc" option-id="2" >Large</option>

        <option value="aa" option-id="3" >Small</option>
        <option value="bb" option-id="3" >Standard</option>

        <option value="bb" option-id="4" >Standard</option>
        <option value="cc" option-id="4" >Large</option>  

        <option value="cc" option-id="4" >Large</option>  

        <option value="cc" option-id="4" >Large</option>  

    </select>

    var $select1 = $( '#select1' ),
        $select2 = $( '#select2' ),
        $select3 = $( '#select3' ), // I added that line but not sure if its correct

        $options_a = $select2.find( 'option' ),
        $options_b = $select3.find( 'option' ); // I added that line but not sure if its correct

    $select1.on( 'change', function() {
        $select2.prop("disabled", false);

      $select2.html( $options_a.filter(function () {
        return $(this).attr('option-id') === $select1.val() ||
            $(this).attr('option-id') === "a"
      }))

      $select2.val('a')
    } )

    // I added the next lines for select3 but not sure if they are correct
    $select2.on( 'change', function() {
        $select3.prop("disabled", false);
      $select3.html( $options_b.filter(function () {
        return $(this).attr('option-id') === $select2.val() ||
            $(this).attr('option-id') === "a"
      }));

      $select3.val('a')
    } )

Answer 2

Попробуйте это:

$("#select2").attr("disabled","");
    $("#select3").attr("disabled","");
    $(document).on("change","#select1",function (event) {
        if($("#select1")[0].selectedIndex == 0){
            $("#select2").attr("disabled","");
            $("#select3").attr("disabled","");
            $("#select2")[0].selectedIndex = 0;
            $("#select3")[0].selectedIndex = 0;
        }else{
            
            $("#select2").removeAttr("disabled");
            
            $("#select3").removeAttr("disabled");            
        }
    });

<select name="" id="select1">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <select name="" id="select2">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <select name="" id="select3">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <script src="jquery-3.3.1.min.js"></script>