Как отключить выпадающий список, если у него есть один вариант?

Question

Мне интересно, как отключить третий раскрывающийся список, если у него не было никаких параметров после фильтрации (исключая опцию Заполнитель параметров Select).

Я полагаю, что добавление статических операторов if, таких как if и $ select3.length, может решить эту проблему, но я не знаю, как реализовать это вместе с фильтрацией в моем коде, так как я очень новичок в 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

Для этого вы можете установить свойство disabled на $select3 в зависимости от количества option элементов в нем. Для этого вы можете добавить эту строку в обработчик событий change для $select2:

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

Обратите внимание, что он отключен, когда есть только элемент 1, так как у вас всегда есть значение по умолчанию «Выберите ваш вариант».

Также стоит отметить, что option-id - это нестандартный атрибут, который будет означать, что ваш HTML неверен. Я бы предложил вместо этого использовать data атрибуты для поддержания действительности.

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>