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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -