jquery replicating html select options but different names

Question

I have an html dropdown :

<select name="name1">
<option value="1">John</option>
<option value="2">Doe</option>
<option value="3">Foo</option>
<option value="4">Bar</option>
</select>

Is there a jQuery function that generates the same options but a different dropdown name like:

<select name="name2">
<option value="1">John</option>
<option value="2">Doe</option>
<option value="3">Foo</option>
<option value="4">Bar</option>
</select>

Answer 1

Assuming that $place is where you want to append the new combobox.

$select = $('select').clone();

$place.append($select.attr('name', 'name2'));

demo

Reference:

• http://api.jquery.com/clone/

Answer 2

Try cloning and changing the name,

var $newSelect = $('select[name=name1]').clone().attr('name', 'name2');

append/prepend the $newSelect to anywhere in your document :)

Also as David suggested you can dynamically generate the name using below approach,

var $newSelect = $('select[name=name1]')
                    .clone()
                    .attr('name', function(i,n) { 
                         var int = 
                                parseInt(n.match(/\d*/),10); 
                         return n.replace(/\d*/, int + 1); 
                     });

Answer 3

$('<jquery selector criteria>').clone().attr("name", "new_name")