Javascript 如何修复依赖jQuery下拉选择代码？

我想做3个相关下拉列表，其中选择2上的选项将取决于选择1上的选择，选择3上的选项将取决于选择2上的选择，一些选择2选项应具有选择3值，如果选择如选择2标签所示，则一些不应具有选择3选项

我认为当前的代码在第一个和第二个下拉列表中运行良好，但不知道如何将其与第三个下拉列表链接，并使第三个下拉列表依赖于第二个下拉列表

我发现其他代码都是使用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>

这是工作代码

HTML

select2函数希望按idx进行筛选，但html中的属性仍然是选项id

此外，您的idx希望与select2的值匹配，因此idx的值应该是相应的字母

---

还有一个语法错误设置选项b变量

在这里。你可以试试这个。

---

}

我想这个应该适合你。将保留您的值指定。 Select2中选项的sizes属性包含逗号分隔的整数列表，Select3中选项的size属性包含单个整数

下面的代码将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>

---

感谢您的回复，不幸的是，我需要为每个选项在value attribute上存储一个特定的数据，并使用POST将其添加到summit中，这就是为什么我在这里使用了一个自定义属性。不幸的是，无法使第三个下拉列表与自定义属性一起工作，它看起来仍然是按值过滤，因为在我更改值名称时它完全停止工作。幸运的是，第三个下拉列表的过滤是错误的，我命名了select标签以反映我所需要的预期过滤。我刚刚帮助了另一个有同样问题的人。看看我的答案，确保看看我如何通过验证dropdownlist的索引来处理这个问题。如果你仍然做不到，我会帮你解决这个问题

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

$(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();

})

$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="";
  }
});

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