我在表单中创建了4个字段，供某人选择产品类型。字段的顺序如下：Category＆gt;输入＆gt;尺寸＆gt;颜色
如果有人更改了类别或类型选择，则应重置所有下一个字段。这在第一组字段上工作正常，但如果有人单击我的“添加产品”按钮，克隆的字段集将忽略我编写的第一个字段的代码。我没有看到任何错误消息，我不确定出了什么问题。
这是我的小提琴：http://jsfiddle.net/gajSu/
这正是无法正常工作的原因：
我希望这是有道理的。我知道有插件可以做到这一点，但我想自己建立这个，所以我可以学习。
提前感谢您的帮助。
的jQuery
$(document).ready(function() {
$('div' + '.menu').hide();
$('a').click(function () {
$('#' + $(this).attr('class')).show().siblings('div').hide();
});
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 prodSelect = $('.prod-info');
var category = $('select[name^="Product_category"]');
var productType = $('select[name^="Product_type"]');
prodSelect.change(function () {
var catSelected = $(this).val();
console.log(catSelected);
$(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();
});
$('#add-product').click(function () {
$('<ul/>', {
'class' : 'extraPerson', html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
});
function GetHtml()
{
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=Product_category1]')[0].name="Product_category" + len;
return $html.html();
}
}）;
HTML
<form id="warranty">
<ul class="extraPersonTemplate">
<li>
<label for="Product_category">Product Category <em>*</em></label>
<select name="Product_category1" 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_type1" class="product-type prod-info"></select>
<div class="other" style="display: none;">
<label for="Other_Product_Type">If Other, please specify: </label>
<input class="text-field" name="Other_Product_Type1" />
</div>
</li>
<li style="display: none;" class="subCats">
<label for="Product_size">Product Size <em>*</em></label>
<select name="Product_size1" 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="5-half_QT">5 ½ qt.</option>
<option value="6-threequarter_QT">6 ¾ qt. </option>
<option value="7-quarter_QT">7 ¼ qt.</option>
<option value="8_QT">8 qt.</option>
<option value="9_QT">9 qt.</option>
<option value="9-half_QT">9 ½ qt.</option>
<option value="12_QT">12 qt.</option>
<option value="13-quarter_QT">13 ¼ qt.</option>
<option value="15-half_QT">15 ½ qt.</option>
<option value="10-quarter_in">10 ¼"</option>
<option value="11-threequarter_in">11 ¾"</option>
<option value="Other">Other</option>
<option value="NA">Not Applicable</option>
</select>
<div class="other" style="display: none;">
<label for="Other_Product_Size">If Other, please specify: </label>
<input class="text-field" name="Other_Product_Size1" />
</div>
</li>
<li style="display: none;" class="subCats">
<label for="Product_color">Product Color <em>*</em></label>
<select name="Product_color1" 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>
<option value="Cassis">Cassis</option>
<option value="Cherry">Cherry</option>
<option value="Cobalt">Cobalt</option>
<option value="Coral">Coral</option>
<option value="Cotton">Cotton</option>
<option value="Cream">Cream</option>
<option value="Dijon">Dijon</option>
<option value="Dune">Dune</option>
<option value="Fennel">Fennel</option>
<option value="Flame">Flame</option>
<option value="Indigo">Indigo</option>
<option value="Ink">Ink</option>
<option value="Kiwi">Kiwi</option>
<option value="Lapis">Lapis</option>
<option value="Linen">Linen</option>
<option value="Marseille">Marseille</option>
<option value="Mineral Blue">Mineral Blue</option>
<option value="Ocean">Ocean</option>
<option value="Palm">Palm</option>
<option value="Quince">Quince</option>
<option value="Rosemary">Rosemary</option>
<option value="Sisal">Sisal</option>
<option value="Soleil">Soleil</option>
<option value="Spinach">Spinach</option>
<option value="Truffle">Truffle</option>
<option value="White">White</option>
<option value="Stainless">Stainless Steel</option>
<option value="FHA">Non-stick</option>
<option value="NoColor">N/A</option>
</select>
</li>
</ul>
<div id="container"></div>
<div id="add-product">Add a product</div>
</form>
答案 0 :(得分：0)
要解决第2点：“如果单击添加产品 - 将克隆这两个字段。我希望克隆整个UL，但不应忽略为最后3个列表项定义的”display：none“样式 - 仅限产品类别应该显示，就像你加载它时一样。“
我在最后添加：
<div id="extraPersonTemplateSaveInit"></div>
在JS top中，就在文档就绪之后：
$('#extraPersonTemplateSaveInit').hide();
$(".extraPersonTemplate").clone().appendTo('#extraPersonTemplateSaveInit');
和GetHtml方法：
function GetHtml()
{
var len = $('.extraPerson').length;
var $html = $('#extraPersonTemplateSaveInit .extraPersonTemplate').clone();
$html.find('[name=Product_category1]')[0].name="Product_category" + len;
return $html.html();
}
但是现在，第二个产品不再触发“更改”事件。 希望这仍然有用。我一直在寻找