javascript - 带有javascript的html5下拉列表

Question

我必须在 html 页面中显示 250 个国家/地区的下拉列表。我可以通过下面轻松做到

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

我必须在 html 页面中使用 5 次相同的列表。那么，我怎样才能减少重复工作呢？

Answer 1

您可以使用 jQuery 的 clone 来克隆元素：http ://api.jquery.com/clone/

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

这将克隆国家下拉列表 5 次，更改每个的 ID 属性以使其唯一，然后将其附加到页面。

Answer 2

这是纯 ol' JavaScript 中的另一个选项：

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

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

您可以在需要时重用 cloneList 函数。