<!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选项的更多相关文章

  1. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  2. js实现select动态添加option

    关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...

  3. select 动态添加option函数

    转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用!  ... /** * 功能:select对象动态添加Opt ...

  4. layui select动态添加option

    <form class="layui-form" action=""> <div class="layui-form-item pr ...

  5. Js Select动态添加Option

    var now = new Date(); function setDate(type, id, from, to) { var str = ""; for (var i = fr ...

  6. 三. 动态添加option选项

  7. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  8. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  9. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

随机推荐

  1. echarts图表大小随着外部div大小变化

    jquery有resize()事件,但直接调用没有起作用,引入jquery.ba-resize.js文件就可以了. 例如: <div class="chart" > & ...

  2. ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象

    这篇文章主要来讲HTML5中的新方法:parse()把字符串转换成josn格式的数据和stringify()把josn格式的数据转换成字符串 eval()方法的回顾 eval()方法可以将任何字符串解 ...

  3. nosql：文件存储和sql数据库存储形式之外的存储系统都是nosql

    为了设计一个比较好的磁盘缓存,我调查了大量的开源库,包括 TMDiskCache.PINDiskCache.SDWebImage.FastImageCache 等,也调查了一些闭源的实现,包括 NSU ...

  4. pom文件miss artifact com.sun:tools:jar:1.5.0:system问题

    问题现象: 导入新的maven项目时,有时候pom.xml文件会提示一个错误信息:Missing artifact com.sun:tools:jar:1.5.0:system 问题原因: maven ...

  5. css3 object-fit详解

    上传头像的时候遇到了头像变形的问题,最后通过object-fit: cover完美解决了.这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能. object-fit理解 CSS3 backgro ...

  6. CSAPP：第三章程序的机器级表示2

    CSAPP:程序的机器级表示2 关键点:算术.逻辑操作 算术逻辑操作1.加载有效地址2.一元二元操作3.移位操作 算术逻辑操作   如图列出了x86-64的一些整数和逻辑操作,大多数操作分成了指令类( ...

  7. [SHOI2015]自动刷题机

    嘟嘟嘟 这题就比较水了,毕竟只评了个蓝. 想一下发现满足单调性,所以可以二分找最大值. 但是最小值怎么办?刚开始我很zz的以为只要把判断条件从大于等于改成小于等于就行了,后来发现根本不对. 想了想因为 ...

  8. pyspider环境部署1--python3安装

    爬虫是一个既好玩又好用的东西,接触它有1年多了,了解一些,算不上精通.爬过新闻.微信公众号,主要用pyspider,scrapy也了解过,python2和3都尝试过.公司业务规模不大,基于 pytho ...

  9. [intoj#7]最短距离

    190227模拟 题目描述 给定一张 N 个点的有向图,点 i 到点 j 有一条长度为 i/gcd(i,j) 的边. 有个 Q 询问,每个询问包含两个数 x, y,求从点 x 出发到点 y 的最短距离 ...

  10. idea 2018.1 for mac JRebel破解

    第一步: 在 Idea 中下载 Jrebel 路径:preferences-plugins-Browse repositories-直接搜索下载 Jrebel   第二步:配置反向代理工具 1.安装 ...