页面jquery上的多个相关选择框

您好，我正在尝试创建一个表单，其中有两个或更多相同的依赖选择框。问题是，我可以从第一个选择框中进行选择，但不知道如何从其他选择框中进行选择。有人能帮我吗

我无法从第三个选择框中选择

这是：

JS代码：

        $(document).ready(function() {
      $('select[name*="[]"]').each(function(){

        var attribute = {
        'shoes': ['standard'],
        'trous': ['male', 'female'],
        'shirt': ['blue', 'red', 'green', 'brown', 'yellow'],
        'hoodie': ['blue', 'red'],
        }

        var size = {
            'shoes': ['35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46'],
            'trous': ['44', '46', '48', '50', '52', '54', '56', '58', '60', '62', '64'],
            'shirt': ['S', 'M', 'L', 'XL', 'XXL'],
            'hoodie': ['S', 'M', 'L', 'XL', 'XXL'],
        }

        $('select[name*="[]"]').change(function () {
        var $attribute = $(this).next('.attribute');
        var product = $(this).val(), attProd = attribute[product] || [];

        var html = $.map(attProd, function (attOpt) {
            return '<option value="' + attOpt + '">' + attOpt + '</option>'
        }).join('');
        $attribute.html(html)
       });

        ('select[name*="[]"]').change(function () {
        var $size = $('select').next('.size');
        var product = $(this).val(), sizeProd = size[product] || [];

        var htmlS = $.map(sizeProd, function(sProd){
            return '<option value="' + sProd + '">' + sProd + '</option>'
        }).join('');
        $size.html(htmlS)
        });
       });
    });

$（文档）.ready（函数（）{
$（'select[name*=“[]”）。每个（函数（）{
变量属性={
“鞋”：[“标准”]，
‘trous’：[‘男性’、‘女性’]，
“衬衫”：[“蓝色”、“红色”、“绿色”、“棕色”、“黄色”]，
“连帽衫”：[“蓝色”、“红色”]，
}
变量大小={
‘鞋子’：[‘35’、‘36’、‘37’、‘38’、‘39’、‘40’、‘41’、‘42’、‘43’、‘44’、‘45’、‘46’]，
‘trous’：[‘44’、‘46’、‘48’、‘50’、‘52’、‘54’、‘56’、‘58’、‘60’、‘62’、‘64’]，
'衬衫'：['S'，'M'，'L'，'XL'，'XXL']，
‘连帽衫’：[‘S’、‘M’、‘L’、‘XL’、‘XXL’]，
}
$（'select[name*=“[]”）。更改（函数（）{
var$attribute=$（this.next（'.attribute'）；
var product=$（this.val（），attProd=attribute[product]| |[]；
var html=$.map（attProd，函数（attOpt）{
返回“”+attOpt+“”
}).加入（“”）；
$attribute.html（html）
});
（'select[name*=“[]”）。更改（函数（）{
变量$size=$（'select'）。下一步（'.size'）；
var product=$（this.val（），sizeProd=size[product]| |[]；
var htmlS=$.map（sizeProd，函数（sProd）{
返回“”+sProd+“”
}).加入（“”）；
$size.html（htmlS）
});
});
});

和html代码：

<div class="options">
    <select name="product[]" class="custom-select form-control-sm product">
        <option></option>
        <option value="shoes">Boots</option>
        <option value="trous">Trousers</option>
        <option value="shirt">Shirt</option>
        <option value="hoodie">Hoodie</option>
    </select>
    <select name="att[]" class="custom-select form-control-sm attribute">
    </select>
    <select name="size[]" class="custom-select form-control-sm size">
    </select>
   <input name="number[]" type="text" style="width: 50px"/>
</div>
<div class="options">
    <select name="product[]" class="custom-select form-control-sm product">
        <option></option>
        <option value="shoes">Boots</option>
        <option value="trous">Trousers</option>
        <option value="shirt">Shirt</option>
        <option value="hoodie">Hoodie</option>
    </select>
    <select name="att[]" class="custom-select form-control-sm attribute">
    </select>
    <select name="size[]" class="custom-select form-control-sm size">
    </select>
   <input name="number[]" type="text" style="width: 50px"/>
</div>

靴子
裤子
衬衫
连帽衫
靴子
裤子
衬衫
连帽衫

希望下面的代码对您有用。每个HTML元素的

id

应该是唯一的，因此我删除了

select

元素的

id=product

和

id=attribute

。更新JS代码以获得

属性的句柄

选择如下：

$(this).parent().siblings().find(".attribute");

$（文档）.ready（函数（）{
$（'.product'）。每个（函数（）{
变量属性={
“鞋”：[“标准”]，
‘trous’：[‘男性’、‘女性’]，
“衬衫”：[“蓝色”、“红色”、“绿色”、“棕色”、“黄色”]，
“连帽衫”：[“蓝色”、“红色”]，
}
$（'.product'）.change（函数（）{
var$attribute=$（this.parent（）.sides（）.find（“.attribute”）；
var product=$（this.val（），lcns=attribute[product]| |[]；
var html=$.map（lcn，函数（lcn）{
返回“”+lcn+“”
}).加入（“”）；
$attribute.html（html）
});
});
});

靴子
裤子
衬衫
连帽衫
靴子
裤子
衬衫
连帽衫
提交
首先，您的
html
代码出错，因为您使用了两个具有相同id的
select
：

<select name="att[]" id="attribute" class="custom-select form-control-sm attribute">

<select name="product[]" id="product" class="custom-select form-control-sm product">



然后我纠正你的错误，我在这里纠正你的错误&它工作得很好


$（文档）.ready（函数（）{
$（'select[name*=“[]”）。每个（函数（）{
变量属性={
“鞋”：[“标准”]，
‘trous’：[‘男性’、‘女性’]，
“衬衫”：[“蓝色”、“红色”、“绿色”、“棕色”、“黄色”]，
“连帽衫”：[“蓝色”、“红色”]，
}
变量大小={
‘鞋子’：[‘35’、‘36’、‘37’、‘38’、‘39’、‘40’、‘41’、‘42’、‘43’、‘44’、‘45’、‘46’]，
‘trous’：[‘44’、‘46’、‘48’、‘50’、‘52’、‘54’、‘56’、‘58’、‘60’、‘62’、‘64’]，
'衬衫'：['S'，'M'，'L'，'XL'，'XXL']，
‘连帽衫’：[‘S’、‘M’、‘L’、‘XL’、‘XXL’]，
}
$（'select[name*=“[]”）。更改（函数（）{
var$attribute=$（this.next（'.attribute'）；
var$size=$（this）.next（'.attribute'）.next（'.size'）；
var product=$（this.val（），lcns=attribute[product]| |[]；
var product22=$（this.val（），lcns22=size[product]| |[]；
var html=$.map（lcn，函数（lcn）{
返回“”+lcn+“”
}).加入（“”）；
var html2=$.map（lcns22，函数（lcn）{
返回“”+lcn+“”
}).加入（“”）；
$attribute.html（html）；
$size.html（html2）；
});
});
});

靴子
裤子
衬衫
连帽衫
靴子
裤子
衬衫
连帽衫
你好，我能知道你为什么不批准我的答案吗？嗨，很抱歉，我不能同时批准两个答案。两个人都在为我工作。我完全不理解，但问题是你先批准了我的，然后又不同意。如果你已经批准了另一个答案，而没有我的答案，我不会要求你批准。谢谢你的诚实：）@MehdiBouzidi我在用你的代码；）如果我想添加另一个选择，选择name=size[]，并将取决于带有选项的产品-鞋：35,36。。。衬衫：S，M。。。你能帮我吗？@tomas更新你的问题代码&我会更新我的答案来帮助你。我的代码已经更新，并且已经使用了你在这篇文章中的代码。