Dynamically add a select dropdown menu in javascript

Question

I'm trying to add a dropdown menu and other input fields dynamically. So far it works fine adding Text input field, but it does nothing with Select input (dropdown).

This is the HTML:

<form method="POST"> 
    <div id="dynamicInput"></div>
    <input type="button" onClick="addInput('dynamicInput');" value="Add inputs"/>
</form>

This is the Javascript:

function addInput(divName){
    var newdiv = document.createElement('div');
    newdiv.innerHTML = 
   "<input type='text' id='name'>"+
   '<select id="age">
       <option value="18">18</option>
       <option value="18">18</option>
   </select>';
   document.getElementById(divName).appendChild(newdiv);
}

Peace.

are you missing literal quotes in the real copy or just on here? — dandavis
– dandavis, Commented Mar 17, 2015 at 23:57
@dandavis I've tried also this with no success: newdiv.innerHTML = "<input type='text' id='name'>"+ "<select id='age'> <option value='18'>18</option> <option value='18'>18</option> </select>"; — Erick
– Erick, Commented Mar 18, 2015 at 3:04

msfoster · Accepted Answer · 2015-03-18 00:16:03Z

1

I bet your console tells you something like unexpected token. Concatenation of a multiline string requires escaping.

You can do:

myVar = "hello \
    sir!";

or concatenate each line:

myVar = "hello " + 
    "sir!";

edited Mar 18, 2015 at 0:16

answered Mar 18, 2015 at 0:06

msfoster

2,5721 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically add a select dropdown menu 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