html - Append another dropdown using jquery -
i'm trying append dropdown. i'm trying add dropdown of button. dropdown should contain same items in existing dropdown. below code.
this jquery script condition user can't create more 10 dropdown box.
$("#addbutton").click(function() { if (counter > 10) { alert("only 10 dropdowns allowed"); return false; } var newddboxdiv = $(document.createelement('div')) .attr("id", +counter); newddboxdiv.after().html('<label>dropdown #' + counter + ' : </label>' + '<select type="text" name="dropdown' + counter + '" id="dropdown' + counter + '" value="" >'); newddoxdiv.appendto("#mb"); counter++; }); $("#removebutton").click(function() { if (counter == 1) { alert("no more dropdown remove"); return false; } counter--; $("#tid" + counter).remove(); });
and below cshtml
<div class="editor-field" id="mb"> @html.dropdownlistfor(model => model.mc, viewbag.lcountry selectlist, "--select--", new{@id="tid"})
above code doesn't work. if has suggestion on how accomplish it, please share.
edit: buttons below
<input type='button' value='add' id='addbutton'> <input type='button' value='remove' id='removebutton'>
if correcly understand question should use clone as
<select id="template"> <option value="volvo">volvo</option> <option value="saab">saab</option> </select> <div id="test"> </div> <input type='button' value='add' id='addbutton'> <input type='button' value='remove' id='removebutton'> <script> $(document).ready(function(){ $("#addbutton").click(function(){ var elements=$("select[id!='template']"); var newelement=$("#template").clone(true); var count=elements.length; if(count>8) { alert('no more dropdowns'); } else { newelement.attr('id',count);//rename new element refers distinguished object instead of cloned object $("#test").append(newelement); } }); }); </script>
obviously have dropdownlist object in place of template object
Comments
Post a Comment