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

内容如下:

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • android控件大全及用法_学双人舞一步一步教学

    android控件大全及用法_学双人舞一步一步教学GridView用于显示二维滚动网格的View。同ListView一样,他的数据项也是从ListAdapter中产生。关于他的使用方法可参见官网的示例GridView 。下面先了解下GridView中常用到的属性:1、android:numColumn:指定GridView的列数,如果指定为auto_fit,则可能根据控件的大小自动调整每行显示的列数。2、android:st

  • PAT乙级-【题目+解答】汇总(100%原创/100%完成)

    PAT乙级-【题目+解答】汇总(100%原创/100%完成)PAT乙级-【题目+解答】汇总PAT乙级-AC全解汇总PAT乙级解答集合

  • python保存两位小数的几种方法,python2保留小数

    python保存两位小数的几种方法,python2保留小数python保存两位小数的几种方法文章目录:一、保留两位小数且做四舍五入处理1、使用字符串格式化2、使用python内置的round()函数3、使用python内置的decimal模块二、保留两位小数且不做四舍五入处理1、使用序列中的切片2、使用re正则匹配模块一、保留两位小数且做四舍五入处理1、使用字符串格式化>>>x=3.1415926>&…

  • java pfx_如何在Java读取PFX格式证书「建议收藏」

    java pfx_如何在Java读取PFX格式证书「建议收藏」X509CertificatekeyPairCert=x509Certs[0];intiKeySize=X509CertUtil.getCertificateKeyLength(keyPairCert);System.out.println(“证书密钥算法=”+keyPairCert.getPublicKey().getAlgorithm());System.out.println(“…

  • 2020十大正规现货交易平台排行榜

    2020十大正规现货交易平台排行榜对国内投资者而言,贵金属投资有内、外盘之分,因此者在选择平台,投资者应该从市场成熟度和产品优势出发,先明确自己在哪一个市场进行投资,再挑选那些信誉度极高、以客户利益为大前提、在行业内排名较前平台。其中,上海黄金交易所(SGE)属于国家级的交易场所,也是目前国内唯一能够同时兼营黄金和白银现货产品的交易所。如果投资者想通过排名靠前的平台参与上金所的产品,可以在国内的四大商业银行中作出选择。至于外盘产品方面,我们建议投资者选择香港排名靠前的平台。因为香港的正规平台都持有金银业贸易场(CGSE)颁发的牌照,而只

  • Windows注入与拦截(1) — DLL注入的基本原理「建议收藏」

    Windows注入与拦截(1) — DLL注入的基本原理「建议收藏」一.DLL注入技术的用途从前面的《Windows内存体系》系列文章中我们可以知道,在Windows系统中,每个进程都有自己私有的地址空间。当我们用指针来引用内存的时候,指针的值表示的是进程自己的地址空间的一个虚拟的内存地址。进程不能通过指针来引用其他进程地址空间的内存。因此,如果一个进程有缺陷会导致其引用和覆盖随机地址处的内存,那么这个缺陷的影响就会不会扩散到其他的进程。独立的地址空间有…

发表回复

您的电子邮箱地址不会被公开。

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