Question

我想创建3个依赖下拉列表，其中select 2的选项将取决于select 1的选择，select 3的选项将取决于depend 2的选择。select 2的某些选项应具有select 3的值，并且如果选择了select2标签上显示的内容，则某些选项应该没有select 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>

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

这是工作代码

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希望与select2的值匹配，因此idx的值应为对应的字母。

还有语法错误设置option_b变量

Answer 2

您在这里。你可以试试看 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 3

我认为这应该为您做。您的价值分配将保留。 Select2中选项的sizes属性包含一个逗号分隔的整数列表，而Select3中选项的size属性包含一个整数。

以下代码将Select3中的option元素放入数组中并对其进行迭代。对于每个选项，它首先隐藏该选项，然后检查其大小是否为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>

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

3 个答案: