How to disable select dropdown if it has one option?

Question

Im wondering how to disable the third dropdown in case it didnt have any options after filtering (Excluding the Select option placeholder option).

I guess that adding a if statment like if and $select3.length could solve the issue but dont know how to implement that along with the filtering in my code since im very new to javascript.

<select name="select1" id="select1">
    <option value="" disabled selected>Select your option</option>
    <option value="1" option-id="1">Sitzen </option>
    <option value="2" option-id="2">Schlafen</option>
    <option value="3" option-id="3">Reisen</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">Comfort Cushion</option>
    <option value="2" option-id="1">Freilagerungssitzkissen</option>
    <option value="3" option-id="1">Rückenkissen</option>
    <option value="4" option-id="1">Sitzkissen zum Druckmanagement</option>
    <option value="5" option-id="1">Wedge Cushion</option>
    <option value="6" option-id="1">Wedge Pillow</option>
    <option value="7" option-id="2">Comfort Pillow</option>
    <option value="8" option-id="2">Dreamy Cushion</option>
    <option value="9" option-id="2">Kniekissen</option>
    <option value="10" option-id="3">Reise Nackenkissen</option>
</select>

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

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

    <option value="1" option-id="3" >Small</option>
    <option value="2" option-id="3" >Standard</option>

    <option value="2" option-id="4" >Standard</option>
    <option value="3" 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')
    $select3.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')

} )

https://jsfiddle.net/arabtornado/bkm25otw/46/

Answer 1

To achieve this you can set the disabled property on $select3 depending on the number of option elements within it. To do that you can add this line within the change event handler for $select2 :

$select3.prop('disabled', $select3.find('option').length == 1);

Note that it's disabled when there's only 1 element, as you always have the 'Select your option' default.

Also worth noting is that option-id is a non-standard attribute, which will mean your HTML is invalid. I would suggest using data attributes instead to maintain validity.

 var $select1 = $('#select1'), $select2 = $('#select2'), $select3 = $('#select3'), $options_a = $select2.find('option'), $options_b = $select3.find('option'); $select1.on('change', function() { $select2.prop("disabled", false).html($options_a.filter(function() { return $(this).data('option-id') === parseInt($select1.val(), 10) || $(this).data('option-id') === "a" })).val('a') $select3.val('a') }) $select2.on('change', function() { $select3.html($options_b.filter(function() { return $(this).data('option-id') === parseInt($select2.val(), 10) || $(this).data('option-id') === "a" })); $select3.prop('disabled', $select3.find('option').length == 1).val('a') })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="select1" id="select1"> <option value="" disabled selected>Select your option</option> <option value="1" data-option-id="1">Sitzen </option> <option value="2" data-option-id="2">Schlafen</option> <option value="3" data-option-id="3">Reisen</option> </select> <select name="select2" id="select2" disabled> <option value="a" disabled selected data-option-id="a">Select your option</option> <option value="1" data-option-id="1">Comfort Cushion</option> <option value="2" data-option-id="1">Freilagerungssitzkissen</option> <option value="3" data-option-id="1">Rückenkissen</option> <option value="4" data-option-id="1">Sitzkissen zum Druckmanagement</option> <option value="5" data-option-id="1">Wedge Cushion</option> <option value="6" data-option-id="1">Wedge Pillow</option> <option value="7" data-option-id="2">Comfort Pillow</option> <option value="8" data-option-id="2">Dreamy Cushion</option> <option value="9" data-option-id="2">Kniekissen</option> <option value="10" data-option-id="3">Reise Nackenkissen</option> </select> <select name="select3" id="select3" disabled> <option value="a" disabled selected data-option-id="a">Select your option</option> <option value="2" data-option-id="2">Standard</option> <option value="3" data-option-id="2">Large</option> <option value="1" data-option-id="3">Small</option> <option value="2" data-option-id="3">Standard</option> <option value="2" data-option-id="4">Standard</option> <option value="3" data-option-id="4">Large</option> </select>