代码之家  ›  专栏  ›  技术社区  ›  tomas

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

multiple-select select forms jquery
  •  3
  • tomas  · 技术社区  · 7 年前

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

    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>
    2 回复  |  直到 7 年前
        1
  •  2
  •   Mehdi Bouzidi    7 年前

    html 代码出错,因为您使用了两个 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 此处(&M);它很好用 

    $(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>
        2
  •  1
  •   Phani Kumar M    7 年前

    希望下面的代码对你有用。这个 id id=product 和 id=attribute 对于 select 元素。更新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>
    推荐文章
    tomas  ·  jquery页面上的多个相关选择框
    7 年前
    vedankita kumbhar  ·  追加时引导多选下拉菜单不工作
    7 年前
    JustUser  ·  使用php中的Get方法获取所有多选下拉列表
    8 年前
    Salman Ullah Khan  ·  离子框架中网格的多重选择
    8 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号