带有javascript的html5下拉列表

html5 dropdown list with javascript

本文关键字：下拉列表 html5 javascript 带有      更新时间：2023-09-26

我必须在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次相同的列表。那么，我该如何减少重复工作呢？

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

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

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

这是普通JavaScript中的另一个选项：

var cloneList = function(){
 return this.cloneNode();
}.bind(document.getElementById('country'));
var count = 5;
while(count--) document.body.appendChild(cloneList()).id = 'country' + count;

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

相关文章：