jquery 页上的多个相关 select 框
Multiple dependent select box on page jquery
您好,我正在尝试创建包含两个或更多相同依赖 select 框的表单。问题是我可以从第一个 select 框中进行选择,但不知道如何从其他框中进行选择。谁能帮我解决这个问题。
我无法从第三个 select 框中 select。
这里是: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>
希望以下代码对您有用。每个 HTML 元素的 id
应该是唯一的,因此我删除了 select
元素的 id=product
和 id=attribute
。更新了 JS 代码以获取 attribute
select 的句柄,如下所示:
$(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>
首先,您的 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>
您好,我正在尝试创建包含两个或更多相同依赖 select 框的表单。问题是我可以从第一个 select 框中进行选择,但不知道如何从其他框中进行选择。谁能帮我解决这个问题。
我无法从第三个 select 框中 select。
这里是: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>
希望以下代码对您有用。每个 HTML 元素的 id
应该是唯一的,因此我删除了 select
元素的 id=product
和 id=attribute
。更新了 JS 代码以获取 attribute
select 的句柄,如下所示:
$(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>
首先,您的 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>