利用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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python多进程并行代码实例
2019/09/30 Python
PyTorch的torch.cat用法
2020/06/28 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
生产主管岗位职责
2013/11/10 职场文书
运动会横幅标语
2014/06/17 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL