利用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下4个跨浏览器必备的函数
Mar 07 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
JS实现打字游戏
Dec 17 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
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Django 生成登陆验证码代码分享
2017/12/12 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python中partial()基础用法说明
2018/12/30 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python生成词云的实现代码
2020/01/14 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
教师对学生的寄语
2014/04/03 职场文书
工程材料采购方案
2014/05/18 职场文书
学校四风对照检查材料
2014/08/28 职场文书
给领导的感谢信范文
2015/01/23 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis