利⽤js给datalist或select动态添加option选项的⽅法
有时需要从配置⽂件中读取信息，然后添加到⽤户的选择项中，⽐如select的option选项，下⾯针对此类情况做了⼀个实例内容如下：
<!DOCTYPE html>
<html>
<head>
<title>⿏标点击时加载</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
选择城市:<input type="text" name="cname" list="cities"/><br/>
<datalist id="cities">
</datalist>
</body>
</html>
<script type="text/javascript">
//需要添加的数据内容，可以通过ajax请求获取
var cities = [
{label:"xian",value:"西安"},
jquery实现ajax
{label:"hubei",value:"湖北"},
{label:"wuhai",value:"武汉"}
];
//获取datalist的dom
var ss = ElementById("cities");
//定义加载城市的函数
function loadcities(){
for(var i = 0;i < cities.length; i ++){
var city = cities[i];
//纯js实现的⽅式
/*var ateElement("option");
op.setAttribute("label",city.label);
op.setAttribute("value",city.value);
ss.appendChild(op);*/
//jquery实现的⽅式
$("#cities").append('<option label="'+city.label+'" value="'+city.value+'"></option>');
}
}
//页⾯加载完时加载此函数
loadcities();
}
</script>
以上这篇利⽤js给datalist或select动态添加option选项的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。