Динамически добавленные поля в раскрывающемся каскадном списке, не клонирующие стили и игнорирующие функцию изменения
Я создаю 4 поля в форме, чтобы кто-то мог выбрать тип продукта. Порядок полей выглядит следующим образом: Категория> Тип> Размер> Цвет
Если кто-то изменит категорию или тип выбора, все последующие поля должны быть сброшены. Это отлично работает с первым набором полей, но если кто-то нажмет мою кнопку "Добавить продукт", клонированный набор полей будет игнорировать написанный мной код, который работает с первым. Я не вижу сообщений об ошибках и не уверен, что происходит не так.
Вот моя скрипка: http://jsfiddle.net/gajSu/
И вот именно то, что не работает правильно:
- Если вы сделаете выбор в первом раскрывающемся списке, вы увидите соответствующие типы продуктов.
- Если вы нажмете Добавить продукт - оба поля будут клонированы. Я хочу, чтобы весь UL был клонирован, но стиль "display: none", определенный для последних 3 элементов списка, не должен игнорироваться - должна отображаться только категория продукта, так же как и при загрузке.
- При изменении категории в клонированном раскрывающемся списке (2-й продукт) параметры во втором не сбрасываются, как в первом.
Я надеюсь это имеет смысл. Я знаю, что есть плагины, которые могут сделать это, но я хотел бы создать это сам, чтобы я мог учиться.
Заранее благодарю за любую помощь.
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>
1 ответ
Для решения пункта 2: "Если вы нажмете Добавить продукт - оба поля будут клонированы. Я хочу, чтобы весь UL был клонирован, но стиль" display: none ", определенный для последних 3 элементов списка, не должен игнорироваться - должна отображаться только категория продукта, так же, как и при загрузке."
Я добавил в конце после:
<div id="extraPersonTemplateSaveInit"></div>
В топе JS, сразу после того, как документ готов:
$('#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();
}
Но теперь событие "изменение" больше не срабатывает для второго продукта. Надеюсь, это все еще поможет. Я продолжаю искать