利用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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • pytorch: tensor与numpy之间的转换[通俗易懂]

    pytorch: tensor与numpy之间的转换[通俗易懂]训练时,输入一般为tensor,但在计算误差时一般用numpy;tensor和numpy的转换采用numpy()和from_numpy这两个函数机型转换。值得注意的是,这两个函数所产生的tensor和numpy是共享相同内存的,而且两者之间转换很快。importtorchimportnumpyasnp#Converttensortonumpya=torch.ones(3)b=a.numpy()print(a,b)a+=1print(a,b)#Conve

    2022年10月18日
  • MPU9250传感器

    MPU9250内部包括3轴陀螺仪、3轴加速度计和3轴磁力计,这3个功能输出都是16位的数字量;可以通过常用的数据总线(IIC)接口和单片机进行数据交互,传输速率400kHz/s。陀螺仪的角速度测量范围±2000(°/s),具有良好的动态响应特性。加速度计的测量范围最大为±16g(g为重力加速度),静态测量精度高。磁力计采用高灵度霍尔型传感器进行数据采集,磁感应强度测量范围为±4800μT,可用于对偏航角的辅助测量。MPU9250自带的数字运动处理器DMP硬件加速引擎,可

    2022年4月8日
  • android layout 将EditText 和Button放在同一行

    android layout 将EditText 和Button放在同一行

    2021年7月9日
  • mx53 linux gpio 模拟matrix keypad

    mx53 linux gpio 模拟matrix keypadmx53linux用gpio模拟matrixkeypad需要做的工作1、在配置内核驱动的时候添加gpiomatrixkeypad        DeviceDrivers—>                  Inputdevicesupport —>                           Keyboards —>

    2022年5月15日
  • redis分布式锁原理面试(数据库索引用的什么数据结构)

    业务背景:后台定时任务刷新Redis的数据到数据库中,有多台机器开启了此定时同步的任务,但是需要其中一台工作,其他的作为备用,提高可用性。使用Redis分布式锁进行限制,拿到锁的机器去执行具体业务,拿不到锁的继续轮询。分布式锁原理分布式锁:当多个进程不在同一个系统中,多个进程共同竞争同一个资源,用分布式锁控制多个进程对资源的互斥访问。采用Redis服务器存储锁信息(即SET一个Key表示已加锁),可以实现多进程的并发读锁的状态,如果没有锁,则只允许一个进程加锁。Redis分布式锁实现的关键点:

    2022年4月15日
  • DOM「建议收藏」

    DOM「建议收藏」一、DOM简介D——document,没有文档,也就是没有网页,DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中时,DOM就悄然而生。浏览器根据网页文档创建一个文档对象。O——obj

    2022年8月3日

发表回复

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

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