利用js给datalist或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>
有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项，下面针对此类情况做了一个实例
内容如下:
利用js给datalist或select动态添加option选项的更多相关文章
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
- select 动态添加option函数
转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用! ... /** * 功能:select对象动态添加Opt ...
- layui select动态添加option
<form class="layui-form" action=""> <div class="layui-form-item pr ...
- Js Select动态添加Option
var now = new Date(); function setDate(type, id, from, to) { var str = ""; for (var i = fr ...
- 三. 动态添加option选项
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
随机推荐
- dp P1103 书本整理 洛谷
题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上.但是Frank发现,由于很多书的宽度不同,所 ...
- Oracle会话超时退出设置
前一段时间客户打电话说自从数据库搬迁后连接数据库总是提示会话不可用,和客户沟通才知到他们连接数据库的程序是从早上连上数据库后就一直保持连接状态,一天中需要执行几次操作,由于数据库中的会话连接有超时限制 ...
- 使用dd备份和恢复ASM中的数据文件头
这里用大家随处可见的(除了extent分布的x$kffxp需要百度和google外),其余都是文档中有详细记载的常用ASM视图来实现同样功能: 下面的用于从ASM中备份数据文件头: SQL> s ...
- 路飞学城-Python开发集训-第1章
学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...
- docker 3 docker安装
centos docker安装 docker支持以下centos版本: centos 7 (64-bit) centos 6.5 (64-bit)或更高的版本 前提条件 目前,centos仅发行版中的 ...
- classmethod 和 staticmethod
我一般很少用到. Talk is cheap, show you the code. #!/usr/bin/env python # -*- coding: utf-8 -*- ########### ...
- mysql存储引擎之MyISAM 和 InnoDB的比较
一.什么是存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存储和 ...
- Linux并发与同步专题 (1)原子操作和内存屏障
关键词:. <Linux并发与同步专题 (1)原子操作和内存屏障> <Linux并发与同步专题 (2)spinlock> <Linux并发与同步专题 (3) 信号量> ...
- face detection[FaceBoxes]
该文来自<FaceBoxes: A CPU Real-time Face Detector with High Accuracy>.该文时间线是2018年1月 虽然人脸检测上随着深度学习的 ...
- C#发邮件_EmailHelper
EmailHelper类 public class EmailHelper { /// <summary> /// 发送邮件 /// </summary> /// <pa ...