利用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)


相关推荐

  • VS无法打开源文件及无法打开链接库文件的解决方法

    VS无法打开源文件及无法打开链接库文件的解决方法一、无法打开源文件依次点击“项目——配置属性——C/C++——常规”,在“附加包含目录”中加入.h文件所在的文件夹路径二、无法打开文件“XXX.lib”1、依次点击“项目——配置属性——链接器——常规”,在“附加库目录”中加入.lib所在的文件夹的路径 2、在“链接器”中找到“输入”,在“附加依赖项”中加入需要加入的xxx.lib;(要用;和其他链接库分

  • 关于fastjson在Object转String时的一个坑

    关于fastjson在Object转String时的一个坑关于fastjson在Object转String时的一个坑背景在公司的业务中有这么一个场景:需要将某个系统的结果对象放进Hbase中,然后被后续系统读取使用,在Hbase存储的时候,需要将对象中每个属性解析成字符串存入,但一开始存入接口的设计者只考虑了普通类型(Integer、Long、String之类)的字段存储,未考虑Map或者POJO对象的存储,因此原始代码如下: … if(O…

  • IDEA2021.8.3激活码(注册激活)

    (IDEA2021.8.3激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • map转map_java获取map的值

    map转map_java获取map的值String转map:Mapmap_new=newGson().fromJson(s,map.getClass());//需要引入jar包引用的jar<!–配置gson–><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.2.4</v.

  • 安装petalinux总是提示paytho_archlinux安装教程

    安装petalinux总是提示paytho_archlinux安装教程参考教程:Confluence1.准备工作:硬件材料:XilinxZCU106套件一套 16G的SD卡一个 网线一根 MicroUSB线一根 HDMI线一根 USB键盘、鼠标各一个软件材料: UbuntuSource:https://www.xilinx.com/member/forms/download/design-license-xef.html?akdm=0&filename=Ubuntu_Source_Release.zip Petalinu

  • Qt5.15下载和安装教程「建议收藏」

    Qt5.15下载和安装教程「建议收藏」QT5.15的安装QT5.15的变化在线安装器地址下载5.15.2的安装QT5.15的变化官方公告http://download.qt.io/official_releases/qt/5.15/5.15.0/OFFLINE_REAMDE.txtDuetoTheQtCompanyofferingchanges,opensourceofflineinstallersarenotavailableanymoresinceQt5.15.Readmorea

发表回复

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

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