利用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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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 5.5版本的array_column()函数
2014/10/24 PHP
php创建无限级树型菜单
2015/11/05 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python3分析处理声音数据的例子
2019/08/27 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
商场中秋节广播稿
2014/01/17 职场文书
初中家长寄语
2014/04/02 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python