Как исправить этот зависимый выпадающий код выбора JQuery?

Question

Я хочу сделать 3 зависимых выпадающих списка, в которых параметры выбора 2 будут зависеть от выбора выбора 1, а параметры выбора 3 будут зависеть от выбора зависимости 2, некоторые из двух вариантов выбора должны иметь 3 значения выбора иу некоторых не должно быть выбора 3 опций, если они выбраны, как показано на метках select2.

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

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

<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="" disabled selected>Select your option</option>
    <option value="a" option-id="1">Product 1 No Sizes</option>
    <option value="b" option-id="1">Product 2 Standard and large</option>
    <option value="c" option-id="1">Product 3 Small and Standard</option>
    <option value="d" option-id="1">Product 4 Standard and Large</option>
    <option value="e" option-id="1">Product 5 No Sizes</option>
    <option value="f" option-id="1">Product 6 No Sizes</option>
    <option value="g" option-id="2">Product 7 No Sizes</option>
    <option value="h" option-id="2">Product 8 No Sizes</option>
    <option value="i" option-id="2">Product 9 No Sizes<option>
    <option value="i" option-id="3">Product 10 No Sizes<option>
</select>

<select name="select3" id="select3">
    <option value="" disabled selected>Select your option</option>
    <option value="aa" option-id="1">Small</option>
    <option value="bb" option-id="2">Standard</option>
    <option value="cc" option-id="3">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
$select1.on( 'change', function() {
    $select3.html( $options_b.filter( '[option-id="' + this.value + '"]' ) );
} ).trigger( 'change' );

https://jsfiddle.net/6faq5xwn/1/

Answer 1

Вот, пожалуйста.Вы можете попробовать это.https://codepen.io/anon/pen/QYWOJK?editors=1111

$(document).ready(function(){
$sel2Options = $('#select2').html();
$sel3Options = $('#select3').html();

$("#select3 option[option-id!='']").hide();

$('#select1').change(function(s){
  $sel1 = $(this).find(":selected").attr("option-id");

  $('#select2').html($sel2Options);  

  $("#select2 option[option-id!="+ $sel1 +"]").each(function(i,e) {
      if(e.value!="")
          $(this).hide();
  });

})

$('#select2').change(function(s){
  $sel2 = $(this).find(":selected").attr("option-id");

  $('#select3').html($sel3Options);  

  $("#select3 option[option-id!="+ $sel2 +"]").hide();

})

})

Answer 2

Я думаю, что этот должен сделать это для вас. Ваши значения сохраняются. Атрибут sizes параметров в Select2 содержит разделенный запятыми список целых чисел, а атрибут size параметров в Select3 содержит одно целое число.

Следующий код помещает элементы option из Select3 в массив и перебирает их. Для каждого из них сначала скрывается параметр, затем проверяется, является ли его размер одним из размеров, разрешенных для выбранного в данный момент параметра из Select2, и восстанавливается отображение любого параметра с допустимым размером. (Если есть какие-либо допустимые размеры для выбора пользователем, «Выбрать ваш вариант» также рассматривается как действительный размер, так что он будет доступен для отображения в качестве параметра заполнителя.)

$select3.children().get().forEach(function(opt){
  opt.style.display= "none";
  if($select2[0][$select2[0].selectedIndex].dataset["sizes"].includes(opt.dataset["size"])){ 
    opt.style.display="";
  }
});

Вот с остальным кодом, включая новые атрибуты данных в HTML:

<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="" disabled selected>Select your option</option>
    <option value="a" option-id="1" data-sizes="0">Product 1 No Sizes</option>
    <option value="b" option-id="1" data-sizes="2,3,9">Product 2 Standard and large</option>
    <option value="c" option-id="1" data-sizes="1,2,9">Product 3 Small and Standard</option>
    <option value="d" option-id="1" data-sizes="2,3,9">Product 4 Standard and Large</option>
    <option value="e" option-id="1" data-sizes="0">Product 5 No Sizes</option>
    <option value="f" option-id="1" data-sizes="0">Product 6 No Sizes</option>
    <option value="g" option-id="2" data-sizes="0">Product 7 No Sizes</option>
    <option value="h" option-id="2" data-sizes="0">Product 8 No Sizes</option>
    <option value="i" option-id="2" data-sizes="0">Product 9 No Sizes<option>
    <option value="j" option-id="3" data-sizes="0">Product 10 No Sizes<option>
</select>

<select name="select3" id="select3">
    <option value="" disabled data-size="9" selected>Select your option</option>
    <option value="aa" data-size="1">Small</option>
    <option value="bb" data-size="2">Standard</option>
    <option value="cc" data-size="3">Large</option>
</select>

<script type="text/javascript">
  var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $select3 = $( '#select3' ), // I added that line but not sure if its correct
    $options_a = $select2.find( 'option' );

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

// For $select3
  $select2.on( 'change', function() {
    $select3.children().get().forEach(function(opt){
      opt.style.display= "none";
      if($select2[0][$select2[0].selectedIndex].dataset["sizes"].includes(opt.dataset["size"])){ 
        opt.style.display="";
      }
    });
  } ).trigger( 'change' );

</script>

Answer 3

Вот рабочий код

HTML

<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="" disabled selected>Select your option</option>
    <option value="a" option-id="1">Product 1 No Sizes</option>
    <option value="b" option-id="1">Product 2 Standard and large</option>
    <option value="c" option-id="1">Product 3 Small and Standard</option>
    <option value="d" option-id="1">Product 4 Standard and Large</option>
    <option value="e" option-id="1">Product 5 No Sizes</option>
    <option value="f" option-id="1">Product 6 No Sizes</option>
    <option value="g" option-id="2">Product 7 No Sizes</option>
    <option value="h" option-id="2">Product 8 No Sizes</option>
    <option value="i" option-id="2">Product 9 No Sizes<option>
    <option value="i" option-id="3">Product 10 No Sizes<option>
</select>

<select name="select3" id="select3">
    <option value="" disabled selected>Select your option</option>
    <option value="aa" idx="a">Small</option>
    <option value="bb" idx="b">Standard</option>
    <option value="cc" idx="c">Large</option>
</select>

Javascript

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( '[idx="' + this.value + '"]' ) );
} ).trigger( 'change' );

Ваша функция select2 искала фильтр по idx, но атрибут в html все еще былoption-id

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

Кроме того, установка синтаксической ошибки option_b переменная