利用js给datalist或select动态添加option选项

利用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选项,下面针对此类情况做了一个实例

内容如下:

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112374.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Mysql使用到substring截取字符串[通俗易懂]

    Mysql使用到substring截取字符串[通俗易懂]mysql截取字符串的时候是从1开始的而不是从0开始的语法:substring(str,start,len)bz:*_*的形式例子:select* fromcost wheresubstring(bz,1,1)

    2022年5月21日
    35
  • 国内NFT平台及玩法一览[通俗易懂]

    国内NFT平台及玩法一览[通俗易懂]2021年被称为NFT的“元年”,互联网巨头、各大企业、艺术家、明星纷纷入局NFT,屡创新高的NFT价格更是让其成为大众关注焦点。此推出NFT系列专题研究,盘点和总结NFT的发行市场、平台背景、投融资状况、市场热点、政策监管等相关内容,帮助读者对NFT市场有更全面地了解。随着国外NFT风潮的火热,国内风潮总算是姗姗来迟,入局NFT的选手也是越来越多。NFT发行平台是为NFT提供发行、交易等服务的平台,根据平台的所在地,NFT发行平台能够被分为国内和国外两个市场。本文主要对于国内NFT发行平台.

    2022年5月14日
    102
  • PS2021神经滤镜Neural Filters离线安装包 亲测可用

    PS2021神经滤镜Neural Filters离线安装包 亲测可用大家好,我北方的狼,哥们儿称我狼大,其实不论啥狼只要不是白眼狼这事就好办,靠谱。好吧,有了PS神经滤镜,哥们你是不是马上也精神了!言归正传。PS2021软件自面试以来,强大的NeuralFilters神经滤镜被诸多用户所期待,官方也加强了对于软件的管控,导致我们的和谐软件往往无法使用这些在线滤镜,刚开始的2021版本还可以在线使用,随着版本的更新,后面就基本不让用了。很多小伙伴更新了软件后,给我留言反馈NeuralFilters神经滤镜无法使用的问题,现在终于找到了解决方法,那就是使用对应…

    2022年5月11日
    28
  • 拉姆达表达式/Lambda表达式/lambda expression 使用整理

    拉姆达表达式/Lambda表达式/lambda expression 使用整理一、Lamabda表达式定义二、Lamabda表达式语法三、C#中Lamabda使用场景四、J

    2025年7月13日
    2
  • HTTP状态404未找到是什么意思_HTTP状态码详解

    HTTP状态404未找到是什么意思_HTTP状态码详解一些常见的状态码为:200-服务器成功返回网页404-请求的网页不存在503-服务不可用详细分解:1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码说明100(继续)请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。101(切换协议)请求者已要求服务器切换协议,服务器已确认并准备切换。…

    2025年6月10日
    0
  • c++二分法查找_二分法查找python代码

    c++二分法查找_二分法查找python代码二分法:二分法应用条件:1)数组为有序数组。2)同时题目还强调数组中无重复元素,因为一旦有重复元素,使用二分查找法返回的元素下标可能不是唯一的。区间的定义:区间的定义不同代码就不同。1)定义target在[left,right]区间while(left<=right)要使用<=,因为left==right是有意义的,所以使用<=。if(nums[middle]>target)right要赋值为middle-1,因为当前这个nums[mid

    2025年6月17日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号