0

I am trying to add a new select field in HTML form on button click but I have a suspicion that my javascript does not work on my newly created element. I have already searched for this and some people suggest to use jQuery instead of JavaScript but this does not solve my problem either. Here is what I have tried already:

/* BUTTON TO ADD NEW SELECT COMPONENT */
<input type="button" value="Add new" onClick="addInput('dynamicInput');">

/* THIS IS MY JAVASCRIPT WHERE I AM CREATING NEW SELECT */
<script>
    var counter = 1;
    var limit = 100;
    function addInput(divName){
        if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
        }
        else {
            var newspan = document.createElement('select');
            newspan.className = "form-control populate";
            newspan.innerHTML = "<br><select data-plugin-selectTwo class='form-control populate'><option value='VA'>Virginia</option><option value='WV'>West Virginia</option></select>";
            document.getElementById(divName).appendChild(newspan);
            counter++;
        }
    }
</script>

/* THIS IS THE STRUCTURE OF THE SELECT ELEMENT I AM TRYING TO ACHIEVE */
    <select data-plugin-selectTwo class="form-control populate">
        <optgroup label="Alaskan/Hawaiian Time Zone">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
        </optgroup>
        <optgroup label="Pacific Time Zone">
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
            <option value="OR">Oregon</option>
            <option value="WA">Washington</option>
        </optgroup>
    </select>
</div>

This is how the static element looks like This is how the BROKEN or Dynamically created element looks like

In the above pictures, you can see that the newly created select does not have this "search field".

Please give me a solution with the working code if you can! Thank you!

Doorman
  • 19
  • 3
  • well you expect code that has already run to rerun at random'? You would need to look at the documentation for that code and figure out how to trigger it manually. – epascarello Dec 19 '19 at 15:32
  • after creating a new element(select), initialize it. like you initialize the first select, (chosen or select2) – Ahmed Sunny Dec 19 '19 at 15:37
  • @AhmedSunny the first select is manually written in the HTML. The problem is when I dynamically create a new element with a click of a button. The newly created element is with the exact same classes etc. but it does not work properly as you can see in the second picture. I don't know what do you mean by "initialize it". – Doorman Dec 19 '19 at 15:40
  • are you using select2 ? why don't you declare it like `$('#id').select2();` – Ahmed Sunny Dec 19 '19 at 15:57
  • can you share the plugin link for this data-plugin-selectTwo , i have never used it like this, would be helpful, – Ahmed Sunny Dec 19 '19 at 15:59
  • Look at the [answer](https://stackoverflow.com/a/34896387/12567371) to a similar question on stackoverflow. – Bzdykin Dec 19 '19 at 21:19

0 Answers0