Javascript 如何使克隆选择独立于原始选择？
我为表单编写了一些逻辑，其中第二个下拉列表中的可用项根据第一个选择而更改 下拉列表被克隆，以允许用户在需要时使用多个下拉列表 如果原始下拉列表中有任何更改，则克隆的下拉列表将更改。克隆选项中的第二个字段不响应第一个字段中的更改事件 我希望每个克隆字段集的行为独立于其他字段集。这是一把小提琴： 为什么会这样？我尝试使用clone（true，true）进行深度复制，但没有成功。我一直在寻找类似的问题，但我就是想不出答案。我是新来的。有人能帮我吗 jQueryJavascript 如何使克隆选择独立于原始选择？,javascript,jquery,html,deep-copy,Javascript,Jquery,Html,Deep Copy,我为表单编写了一些逻辑，其中第二个下拉列表中的可用项根据第一个选择而更改 下拉列表被克隆，以允许用户在需要时使用多个下拉列表 如果原始下拉列表中有任何更改，则克隆的下拉列表将更改。克隆选项中的第二个字段不响应第一个字段中的更改事件 我希望每个克隆字段集的行为独立于其他字段集。这是一把小提琴： 为什么会这样？我尝试使用clone（true，true）进行深度复制，但没有成功。我一直在寻找类似的问题，但我就是想不出答案。我是新来的。有人能帮我吗 jQuery prods = { Co
prods = {
Cookware: ["- Select -", "Round French Oven", "Oval French Oven", "Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"],
Bakeware: ["- Select -", "Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"],
KitchenTools: ["- Select -", "Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"],
DineEntertain: ["- Select -", "Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", "Other"]
};
var category = $('select[name^="Product_category"]');
var productType = $('select[name^="Product_type"]');
$('.prod-info').live("change", function () {
var catSelected = $(this).val();
$(this).parent("li").next("li.subCats").fadeIn('fast'); /*Fades in next option once selection has been made*/
if($(this).is(category)) {
$('select[name^="Product_type"]').empty();
$('.product-size, .product-color').prop('selectedIndex',0);
$.each(prods[catSelected], function (key, value) {
$('select[name^="Product_type"]')
.append($("<option></option>")
.attr("value", value)
.attr("name", value)
.text(value));
});
}
if($(this).is(productType)) {
$('.product-size, .product-color').prop('selectedIndex',0);
}
});
var otherSelect = $('select');
var select = this.value;
otherSelect.change(function () {
if ($(this).val() == 'Other') {
$(this).next('.other').show();
}
else $(this).next('.other').hide();
});
for (var i = 2; i < 6; i++) { // add counts in a for loop
$('select[name="numProd"]').append('<option value=' + i + '>' + i + '</option>');
}
$.fn.duplicate = function(count, cloneEvents) {
var tmp = [];
for (var i = 0; i < count; i++) {
$.merge(tmp, this.clone(cloneEvents, true, true).get());
}
return this.pushStack(tmp);
};
//SELECT CHANGE FUNCTION (on change get value and clone)
$('select[name="numProd"]').change(function(){ // on change...
var numOfClones = $(this).val() -1; // get value...
var cntr = 2;
$('#addProds').empty(); // empty holder if there are some old clones
$('.prodDetails').duplicate(numOfClones).appendTo('#addProds').each(function() {
$(this).find("select").each(function() {
if (this.name) {
this.name += cntr;
}
if (this.id) {
this.id += cntr;
}
});
++cntr;
});
// duplicate; fill holder with new clones; the class 'new' is just for styling
});
prods={
炊具：[“-选择-”、“圆形法式烤箱”、“椭圆形法式烤箱”、“炖锅”、“平底锅”、“煎锅”、“烤盘”、“炒锅”、“平底锅”、“平底锅”、“平底锅”、“烤炉”、“炖锅”、“特色炊具”、“其他”]，
烤盘：[“-Select-”、“有盖砂锅”、“烤盘”、“陶瓷烤盘”、“特色烤盘”、“个别烤盘”、“金属烤盘”、“其他”]，
厨房工具：[“-选择-”、“餐具”、“厨房配件”、“餐具”、“酒具”、“纺织品”、“其他”]，
餐饮娱乐：[“-选择-”、“餐具”、“餐具”、“桌面配件”、“玻璃器皿”、“水壶”、“茶具收藏”、“咖啡馆收藏”、“其他”]
};
var category=$（'select[name^=“Product_category”]”）；
var productType=$（'select[name^=“Product_type”]”）；
$（'.prod info'）.live（“更改”，函数（）{
var catSelected=$（this.val（）；
$（this）.parent（“li”）.next（“li.subCats”）.fadeIn（“fast”）；/*一旦进行了选择，将在下一个选项中淡出*/
如果（$（此）.is（类别））{
$（'select[name^=“Product_type”]'）。空（）；
$（'.product size，.product color'）.prop（'selectedIndex'，0）；
$。每个（产品[catSelected]，功能（键，值）{
$（'select[name^=“Product_type”]”）
.append（$（“”）
.attr（“值”，值）
.attr（“名称”，值）
.文本（值））；
});
}
if（$（this）.is（productType））{
$（'.product size，.product color'）.prop（'selectedIndex'，0）；
}
});
var otherSelect=$（'select'）；
var select=this.value；
otherSelect.change（函数（）{
if（$（this）.val（）=='Other'）{
$（this.next（'.other'）.show（）；
}
else$（this.next（'.other'）.hide（）；
});
for（var i=2；i<6；i++）{//在for循环中添加计数
$（'select[name=“numProd”]”）。追加（''+i+''）；
}
$.fn.duplicate=函数（计数、克隆事件）{
var tmp=[]；
对于（变量i=0；i <form id="warranty">
<div id="prodDetailsContainer">
<label for="numProd">How many products would you like to register (up to 5) <em>*</em></label>
<select name="numProd">
<option>1</option>
</select>
<ul class="prodDetails" id="prod">
<li>
<label for="Product_category">Product Category <em>*</em></label>
<select name="Product_category" class="category prod-info" style="width: 160px;">
<option value="">- Select Category-</option>
<option value="Cookware">Cookware</option>
<option value="Bakeware">Bakeware</option>
<option value="KitchenTools">Kitchen Tools</option>
<option value="DineEntertain">Dine & Entertain</option>
</select>
</li>
<li style="display: none;" class="subCats">
<label for="Product_type">Product Type <em>*</em></label>
<select name="Product_type" class="product-type prod-info"></select>
<div class="other" style="display: none;">
<label for="Other_Product_Type">Specify Other:: </label>
<input class="text-field" name="Other_Product_Type" />
</div>
</li>
<li style="display: none;" class="subCats">
<label for="Product_size">Product Size <em>*</em></label>
<select name="Product_size" class="product-size prod-info" style="width: auto; outline: none; width:120px;">
<option value="">- Select Size -</option>
<option value="1_QT">1 qt.</option>
<option value="2_QT">2 qt.</option>
<option value="3-half_QT">3 ½ qt.</option>
<option value="4-half_QT">4 ½ qt.</option>
<option value="5_QT">5 qt.</option>
<option value="Other">Other</option>
<option value="NA">Not Applicable</option>
</select>
<div class="other" style="display: none;">
<label for="Other_Product_Size">Specify Other:: </label>
<input class="text-field" name="Other_Product_Size" />
</div>
</li>
<li style="display: none;" class="subCats">
<label for="Product_color">Product Color <em>*</em></label>
<select name="Product_color" class="product-color prod-info">
<option value="">- Select Color -</option>
<option value="Amethyst">Amethyst</option>
<option value="Aubergine">Aubergine</option>
<option value="Black Onyx">Black Onyx</option>
<option value="Caribbean">Caribbean</option>
</select>
</li>
</ul>
<div id="addProds"></div>
</div>
</form>
您希望注册多少产品（最多5个）*
1.
-
产品类别*
-选择类别-
炊具
烤箱
厨房用具
餐饮娱乐
$('select').live('change', function() {
var category = $('select[name^="Product_category"]');
var productType = $('select[name^="Product_type"]');
var catSelected = $(this).val();
var nextProdType = $(this).parent("li").next("li.subCats").children('select[name^="Product_type"]');
var nextSizeColor = $(this).parent("li").next("li.subCats").children('.product-size, .product-color');
$(this).parent("li").next("li.subCats").fadeIn('fast'); /*Fades in next option once selection has been made*/
if($(this).is(category)) {
nextProdType.empty();
nextSizeColor.prop('selectedIndex',0);
$.each(prods[catSelected], function (key, value) {
nextProdType
.append($("<option></option>")
.attr("value", value)
.attr("name", value)
.text(value));
});
}
if($(this).is(productType)) {
nextSizeColor.prop('selectedIndex',0);
}
});