文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何修复依赖jQuery下拉选择代码？

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

Stack Overflow用户
提问于 2019-01-22 17:30:18
回答 3查看 132关注 0票数 1

我想做3个从属下拉列表，其中select 2上的选项将取决于select 1上的选择，select 3上的选项将取决于depend 2上的选择，一些select 2选项应该具有select 3值，而一些select 2选项不应该具有select 3选项，如select2标签上所示。

我认为当前的代码对于第一个和第二个dropdown运行良好，但不知道如何将它与第三个dropdown链接起来，并使第三个dropdown依赖于第二个dropdown。

我发现其他代码也在使用JSON做同样的事情，但由于我对js和jQuery完全陌生，所以我更喜欢使用这样的简单代码。

代码语言：javascript
运行
复制
<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>
代码语言：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
$select1.on( 'change', function() {
    $select3.html( $options_b.filter( '[option-id="' + this.value + '"]' ) );
} ).trigger( 'change' );

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

javascript
jquery
html
EN

回答 3

Stack Overflow用户

发布于 2019-01-22 17:57:22

下面是可用的代码

HTML

代码语言：javascript
运行
复制
<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

代码语言：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中的属性仍然是选项-id

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

此外，设置option_b变量时出现语法错误

票数 1
EN

Stack Overflow用户

发布于 2019-01-22 18:05:30

这就是你要的。你可以试试这个。https://codepen.io/anon/pen/QYWOJK?editors=1111

代码语言：javascript
运行
复制
$(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();

})

})

票数 0
EN

Stack Overflow用户

发布于 2019-01-23 01:48:33

我想这个应该能帮你解决这个问题。您的值分配将被保留。Select2中的选项的sizes属性包含一个以逗号分隔的整数列表，Select3中的选项的size属性包含一个整数。

下面的代码将Select3中的option元素放入一个数组并遍历它们。对于每个选项，它首先隐藏该选项，然后检查其大小是否为Select2中当前所选选项允许的大小之一，并恢复显示具有允许大小的任何选项。(如果有任何可供用户选择的有效大小，“select your option”也会被视为有效大小，以便它可以显示为占位符选项。)

代码语言：javascript
运行
复制
$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中的新数据属性：

代码语言：javascript
运行
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54305103

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档