Rumah > Artikel > hujung hadapan web > 使用js如何给select动态添加option（详细教程）

使用js如何给select动态添加option（详细教程）

亚连asal: 2018-06-09 14:37:4111176semak imbas

下面我就为大家分享一篇利用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:"西安"},
{label:"hubei",value:"湖北"},
{label:"wuhai",value:"武汉"}
]; 
//获取datalist的dom
var ss = document.getElementById("cities");
//定义加载城市的函数
function loadcities(){
for(var i = 0;i < cities.length; i ++){
var city = cities[i];
//纯js实现的方式
/*var op=document.createElement("option"); 
op.setAttribute("label",city.label);
op.setAttribute("value",city.value); 
ss.appendChild(op);*/ 
//jquery实现的方式
$("#cities").append(&#39;<option label="&#39;+city.label+&#39;" value="&#39;+city.value+&#39;"></option>&#39;);
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
</script>

上面是我整理给大家的，希望今后会对大家有帮助。

AngularJS双向数据绑定原理（详细教程）

使用jQuery与vue如何实现拖动验证码功能

Atas ialah kandungan terperinci 使用js如何给select动态添加option（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：SQL正则与mybatis正则使用详解Artikel seterusnya：正则中句号使用范畴有哪些

Artikel berkaitan

Lihat lagi