How to enable select dropdown on change using jQuery?

Question

How to edit that code to make select2 and select3 disabled by default and enable it if there is a selection on the previous select or maybe if there is options on the select (excluding the "Select your option placeholder").

also on this code the last option got selected when selecting the previous select, instead i wanna the first option placeholder to get selected instead "Select your option placeholder"

Below is my code

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

What im looking for is something like this https://www.jqueryscript.net/demo/Multilevel-Dependent-Dropdown-Plugin-With-jQuery-Dependent-Dropdowns/

where select2 and 3 are disabled and even after enabling the placeholder will be selected by default not the last option on the select so the user will be forced to select an option.

thanks

Answer 1

Try this:

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

Answer 2

If i understand correctly what you are asking for. This should do the work. You don't need that CSS for that.

    <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')
    } )