我为表单编写了一些逻辑，其中第二个下拉列表中的可用项目根据第一个选择进行更改。
克隆下拉列表以允许用户在需要时使用倍数。
如果原始下拉列表中的任何内容发生更改，则克隆的下拉列表会发生变化。克隆选项中的第二个字段不响应第一个中的更改事件。
我希望每个克隆的字段集独立于其他字段集。这是一个小提琴：http://jsfiddle.net/HchH8/
为什么会这样？我尝试使用clone（true，true）进行深层复制，但它不起作用。我在SO上搜索过类似的问题，我无法绕过我找到的答案。我是新来的。有人可以帮我吗？
的jQuery
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
});
HTML
<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>
答案 0 :(得分：0)
我想出来了 - 解决方案是在.on函数中移动变量，并使选择器更具体，以便只有下一个字段受到前一个变化（而不是所有变量）的影响。
$('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);
}
});
这是一个工作小提琴，以防将来对其他人有所帮助： http://jsfiddle.net/xJyL7/1/