How to add dynamic drop-down in javascript?

Question

I'm try add new dropdown field when click on add button and its work properly but when i'm add some dynamic dropdown box and fill with values and click on add button for new dropdown box then all above values are removed so how can i do add without remove existing values?

Here is 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>

copy your 1st dropdown html code and paste in script and assign to specific var. Then assign that var to new dropdown — Rahul Chaudhari
– Rahul Chaudhari, Commented Feb 6, 2016 at 9:13

Daniel Mizerski · Accepted Answer · 2016-02-06 09:28:53Z

It's very simple, just look on this example provided by me in the snippet.

You have to connect variable to select object.
Get value and text of option from the user.
Create new DOM element.
Configure this element.
Append this element.
Be proud of your working dropdown.

It will be working with bootstrap as you had in the question. But I removed all the sceleton to provide tidy answer.

Have a 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 the fields")
    }
  }

  document.getElementById("button").onclick = addNew
</script>

Collectives™ on Stack Overflow

How to add dynamic drop-down in javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related