html5 dropdown list with javascript

Question

I have to show a dropdown list of 250 countries in a html page. I can do it easily do it by below

<select id="country" name="country">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
.....
<option value="250">Canary Islands</option>
</select>

I have to use 5 times the same list in a html page. so, how can i reduce repeat work?

CodingIntrigue · Accepted Answer · 2013-07-13 16:23:14Z

2

You can use jQuery's clone to clone the element: http://api.jquery.com/clone/

for(var i=0; i<5; i++) {
  $("body").append($("#country").clone(false).prop("id", "country"+i));
}

This will clone the country dropdown 5 times, changing the ID property of each to make it unique, then append it to the page.

answered Jul 13, 2013 at 16:23

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

Comments

csuwldcat · Accepted Answer · 2013-07-14 01:16:19Z

0

Here's another option in plain ol' JavaScript:

var cloneList = function(){
 return this.cloneNode();
}.bind(document.getElementById('country'));

var count = 5;
while(count--) document.body.appendChild(cloneList()).id = 'country' + count;

You can reuse the cloneList function whenever you need it.

answered Jul 14, 2013 at 1:16

csuwldcat

8,3192 gold badges39 silver badges32 bronze badges

Collectives™ on Stack Overflow

html5 dropdown list with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related