Copy drop-down lists when user clicks button in Javascript

2
votes

How would I go about adding more drop down lists to a form, so when a user clicks a button a drop-down box will be added to the form?

I'm guessing some sort of javascript?

UPDATE:

I want to be able to add more dropdown lists with the same data as the first one. So a dropdown list 1 has 1,2,3 as options. The user then clicks add dropdown list and the second dropdown list contains 1,2,3.

1
javascripthtml
You want to add blank dropdown list or items in dropdown list. Could you please explain your question in more detail. – Awadhendra

1 Answers

3
votes

You can do this with .cloneNode().

Demo: http://jsfiddle.net/ThinkingStiff/pSEUH/

HTML:

<form id="form">
    <select id="select">
        <option>one</option><option>two</option><option>three</option>
    </select>
    <button id="add">Add</button>
</form>

Script:

document.getElementById( 'add' ).addEventListener( 'click', function ( event ) {

    event.preventDefault();
    var select = document.getElementById( 'select' ).cloneNode( true );
    document.getElementById( 'form' ).appendChild( select );

}, false );