利用js给datalist或select动态添加option选项的方法


Posted in Javascript onJanuary 25, 2018

有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如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('<option label="'+city.label+'" value="'+city.value+'"></option>');
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
</script>

以上这篇利用js给datalist或select动态添加option选项的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
javascript中的this作用域详解
Jul 15 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
基于vue.js无缝滚动效果
Jan 25 #Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 #Javascript
vue通过路由实现页面刷新的方法
Jan 25 #Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
JavaScript实现职责链模式概述
Jan 25 #Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
You might like
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP多态代码实例
2015/06/26 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
vue实现轮播图帧率播放
2021/01/26 Vue.js
Python contextlib模块使用示例
2015/02/18 Python
python复制与引用用法分析
2015/04/08 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
详解python3百度指数抓取实例
2016/12/12 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
pandas计数 value_counts()的使用
2019/06/24 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python如何获取文件指定行的内容
2020/05/27 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
《值日生》教学反思
2014/02/17 职场文书
安全月活动总结
2014/05/05 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
音乐课外活动总结
2015/05/09 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python