页面jquery上的多个依赖选择框

Posted 2023-05-09

技术标签:

【中文标题】页面jquery上的多个依赖选择框【英文标题】：Multiple dependent select box on page jquery 【发布时间】：2018-03-02 18:27:23 【问题描述】：

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

我无法从第三个选择框中进行选择。

这里是：JSFiddle

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

这里是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>

【问题讨论】：

您好，请问您为什么不同意我的回答？嗨，很抱歉，我不能批准这两个答案。两者都为我工作。我完全不明白，但问题是你先批准了我的，然后你不批准了。如果您在没有我的情况下批准了其他答案，我将不会要求您批准。没关系，谢谢你的诚实:) @MehdiBouzidi 我正在使用你的代码；） 【参考方案1】：

首先，您的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">

然后我更正你我在这里更正你的JSFiddle 并且它工作正常

$(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 $size = $(this).next('.attribute').next('.size');
             
            var product = $(this).val(), lcns = attribute[product] || [];
	          var product22 = $(this).val(), lcns22 = size[product] || [];
            
            var html = $.map(lcns, function(lcn)
                return '<option value="' + lcn + '">' + lcn + '</option>'
            ).join('');
           
              
            var html2 = $.map(lcns22, function(lcn)
                return '<option value="' + lcn + '">' + lcn + '</option>'
            ).join('');
           
            $attribute.html(html);
            $size.html(html2);
            );
        );
        );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

如果我想添加另一个带有 name=size[] 的选择，并且还取决于带有选项的产品 - 鞋子：35、36、...衬衫：S、M、...可以你帮我解决一下？ @tomas 更新你的问题代码，我会更新我的答案来帮助你我的代码已更新，并且已经在使用您这篇文章中的代码。【参考方案2】：

希望以下代码对您有用。每个 HTML 元素的 id 应该是唯一的，因此我删除了 select 元素的 id=product 和 id=attribute。更新 JS 代码以获取 attribute 的句柄选择如下：

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

$(document).ready(function () 
	$('.product').each(function () 

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

		$('.product').change(function () 
			var $attribute = $(this).parent().siblings().find(".attribute");
			var product = $(this).val(), lcns = attribute[product] || [];

			var html = $.map(lcns, function (lcn) 
				return '<option value="' + lcn + '">' + lcn + '</option>'
			).join('');
			$attribute.html(html)
		);
	);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form class="input" action="test.php" method="post">

<div class="">
	<span>
		<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>
	</span>
	<span>
		<select name="att[]" class="custom-select form-control-sm attribute">
		</select>
	</span>
	<span><input name="number" type="text" style="width: 50px" /></span>
</div>

<div class="">
	<span>
		<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>
	</span>
	<span>
		<select name="att[]" class="custom-select form-control-sm attribute">
		</select>
	</span>
	<span><input name="number" type="text" style="width: 50px" /></span>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

【讨论】：

以上是关于页面jquery上的多个依赖选择框的主要内容，如果未能解决你的问题，请参考以下文章

动态依赖选择框（PHP+JQuery+AJAX）

如何使用jquery禁用列表框中的多项选择？还是javascript？

如何使用jquery重置表单中的多个选择框？

使用 jquery 和 laravel 填充多个选择框

如何使用 jQuery 获取多个选择框值？

通过php填充多个选择框jquery mobile