利用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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
table行随鼠标移动变色示例
May 07 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vant时间控件使用方法详解
Dec 24 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 危险函数全解析
2009/09/09 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python机器学习之KNN分类算法
2018/08/29 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
如何用python批量调整视频声音
2020/12/22 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
运动会广播稿50字
2014/01/26 职场文书
租房协议书范本
2014/04/09 职场文书
师范类求职信
2014/06/21 职场文书
债务纠纷委托书
2014/08/30 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python
Java Redisson多策略注解限流
2022/09/23 Java/Android