How to add dynamic drop-down in javascript? -
i'm try add new dropdown field when click on add button , work when i'm add dynamic dropdown box , fill values , click on add button new dropdown box above values removed how can add without remove existing values?
here code
<script> function addnew () { var numoffield = document.getelementbyid('fields').value; numoffield = number(numoffield)+1; document.getelementbyid('fields').value = numoffield; document.getelementbyid('newevent').innerhtml += "<br><br><br><label class='control-label col-md-3 col-sm-3 col-xs-12'>select </label><div class='col-md-9 col-sm-9 col-xs-12'><select class='form-control' name='event"+numoffield+"'><option value='select'>select</option><option value='1'>foo</option></option><option value='2'>baar</option></select></div>"; } </script> <body> <input type="hidden" value="1" id="fields" name="fields"> <div class="form-group" id="newevent"> <label class="control-label col-md-3 col-sm-3 col-xs-12">select step 1</label> <div class="col-md-9 col-sm-9 col-xs-12"> <select class="form-control" name="event1"> <option value="select">select</option> <option value="1">foo</option> <option value="2">bar</option> {% endfor %} </select> </div> </div> <button type="button"onclick="addnew();">add</button>
it's simple, on example provided me in snippet.
- you have connect variable select object.
- get value , text of option user.
- create new dom element.
- configure element.
- append element.
- be proud of working dropdown.
it working bootstrap had in question. removed sceleton provide tidy answer.
have nice day!
<select id="example"> <option value="select">select</option> <option value="1">foo</option> <option value="2">bar</option> </select> <hr/> value: <input type="text" id="val" /> <br/> option body: <input type="text" id="text" /> <button id="button">add new option</button> <script> var anchor = document.getelementbyid("example") function addnew() { var anchor = document.getelementbyid("example") var val = document.getelementbyid("val").value var text = document.getelementbyid("text").value alert(val+"=>"+text) if (val && text) { alert("adding new option") var option = document.createelement("option") option.classlist.add("example") option.classlist.add("example2") option.name = "for php" option.id = "you know" option.value = val option.text = text anchor.appendchild(option) } else { alert("fill fields") } } document.getelementbyid("button").onclick = addnew </script>
Comments
Post a Comment