jquery - Dynamically added fields in cascading drop down not cloning styles and ignoring change function -
i creating 4 fields in form select product type. order of fields goes this: category > type > size > color
if changes category or type selection, of next fields should reset. works fine on first set of fields, if clicks "add product" button, cloned set of fields ignores code have written works on first. don't see error messages , i'm not sure going wrong.
here fiddle: http://jsfiddle.net/gajsu/
and here not working correctly:
- if make selection in first drop down see corresponding product types appear.
- if click add product - both fields cloned. want whole ul cloned "display: none" style defined last 3 list items should not ignored - product category should display, when load it.
- if change category in cloned drop down (2nd product), options in second don't reset in first one.
i hope makes sense. know there plugins can build myself can learn.
thanks in advance help.
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 product</div> </form>
to resolve point 2 : "if click add product - both fields cloned. want whole ul cloned "display: none" style defined last 3 list items should not ignored - product category should display, when load it."
i added @ end after :
<div id="extrapersontemplatesaveinit"></div> in js top, after document ready :
$('#extrapersontemplatesaveinit').hide(); $(".extrapersontemplate").clone().appendto('#extrapersontemplatesaveinit'); and gethtml method :
function gethtml() { var len = $('.extraperson').length; var $html = $('#extrapersontemplatesaveinit .extrapersontemplate').clone(); $html.find('[name=product_category1]')[0].name="product_category" + len; return $html.html(); } but now, "change" event no longer triggered second product. hope still help. keep searching
Comments
Post a Comment