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

最新推荐文章于 2024-06-19 12:45:00 发布
最新推荐文章于 2024-06-19 12:45:00 发布
阅读量1.1w 收藏 10
点赞数 3
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdhouyigege/article/details/73740641
版权

有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如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>


spring-boot
关注
专栏目录
HTML5下拉列表中 ＜datalist＞ 元素用jquery动态绑定option数据
weixin_48156583的博客
11-08 1710
首先看看从菜鸟复制下来看效果的，可以看出每一个option是写死的，写网页指定少不了从接口获取数据，那我就没办法把数据写死展示出来了。第二步，写一个form表单里面装着和，并给予相应的id。接着就是对names对象数组进行循环处理，把每一个value值都放进新增的option里。若有label值，同理在数组中加label值，然后在循环处理数据中放进去就行。所以接下来是要把option中的value处理成动态的。由于我没有接口，我这里就造个假数据。...
JS对select动态添加options操作(已测)
我笔记
05-12 3940
此非常好用 document.getElementById("ddlResourceType").options.add(new Option(text,value)); 下拉框： <select id="ddlResourceType" onchange="getvalue(this)"> </select> 1、动态删除select中的所有options： document.getElementById("ddlResourceType").options..
js · 操作数组、对象、字符串
weixin_42091247的博客
07-28 1483
获取对象数组的某个属性集合 var data = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }, { a: 7, b: 8, c: 9 } ]; // 使用了 ES6 语法 data.map(item => item.a) // 兼容的写法 data.map(function (item) { return item.a; }); JS判断字符串是否包含一个字符串，JS判断数组是否包含一个字符串，JS判断数组里面的对象是否包含一个字符串 function i
datalist 是什么？以及作用是什么？
最新发布
z13903931414的博客
06-19 854
datalist是 HTML5 中引入的一个新元素，它允许你为<input>元素提供一个“预定义”的选项列表。用户可以在输入时从这些选项中选择，但也可以输入不在列表中的其他值。datalist元素与<input>元素一起使用，通过<option>元素在datalist中定义可用的选项。
DataList控件详细用法(一)
热门推荐
平凡酿就非凡
05-20 2万+
使用DataList控件  本章内容：         1、理解事件冒泡         2、使用模板         3、在DataList中显示数据         4、在DataList中创建多列         5、捕获DataList控件中产生的事件         6、选择DataList中的项         7、使用DataList控件中的DataKey
js数组操作
jjy17337774210的博客
04-30 357
var result; var arr=[{name:"十号",id:'10'}, {name:"二十号",id:'20'}, {name:"张三",id:'30'}, {name:"里斯",id:'40'}, {name:"里斯号",id:'50'}, {name:"里斯1号",id:'23'}] var data; var arr2 = [1,2,3,4]; let datalist = [{code:20...
js 自制datalist选项列表出现后点击其他地方使其隐藏
Higashino_Keigo的博客
06-10 959
前提是这样的：先做了个form，再往里加几个input，input用div包裹，然后自己用css做了个datalist，因为datalist标签难以实现自动填充后缀。 后来发现无法在出现datalist后点击其他地方使其隐藏，故使用document.activeElement判断点击事件是否在datalist上，如果不是则隐藏datalist。 html 制作input代码如下（已省略cs...
option与option之间传值（传递多个值）
penghaijun
08-03 5105
 function moveList(from,to){ var fromOption = document.myForm.elements[from];  var fromArray = fromOption.options;  var current=fromOption.selectedIndex;//当current的值为-1时，表示没有没有选中。while(current>-1)  { 
利用js给datalist或select动态添加option选项的方法
10-18
本文将详细介绍如何使用 JavaScript 为 `datalist` 或 `select` 元素动态添加 `option` 选项，这对于创建动态、可自定义的下拉列表或者输入提示至关重要。 首先，让我们解析一下 `datalist` 和 `select` 元素。`...
h5select动态加载数据_Html5新标签datalist实现输入框与后台数据库数据的动态匹配...
weixin_39673037的博客
12-28 635
最近项目中涉及到一个小功能，客户在选择供应商时，由于供应商数目较多(大概3000个左右)，因此直接生成下拉框显然不现实，所以就更换解决方案，打算借助HTML5新增的标签datalist来实现输入中文/拼音首字母时，自动进入数据库模糊查询，并返回相应的结果，生成datalist，由于在输入框中的输入内容发生变化时，datalist会自动触发下拉框，所以使用起来比select更便捷。前端部分代码如下：...
jQuery中select与datalist制作下拉菜单时的区别浅析
10-20
`<select>`通常与`.val()`方法结合，获取或设置用户选择的值，而`<datalist>`则需要配合`<input>`的`list`属性和JavaScript事件监听来实现动态交互。 例如，使用jQuery监听`<select>`的改变事件： ```javascript $...
封装html的select标签的js操作实例
12-09
在动态网页开发中，我们经常需要通过JavaScript来操作这些元素，例如添加、删除、选择或绑定数据。这个实例提供的是一系列封装好的函数，用于简化对`select`标签的操作。 1. `BindSelect`函数： 这个函数的主要...
JS给<select>的<option>赋值&JS发异步请求获取后台列表
ljheee的博客
03-11 1万+
HTML的下拉框标签里面的各个选项option，有时候不能写死，尤其在实现多个下拉框多级联动的时候，后继的option往往需要动态添加。 动态添加option主要有2种：一是用JS添加静态数据，第二种是需要从servlet等后台获取特定的列表，再给赋值。 一、用JS添加静态数据到option 1、JS方式： var selid =document.getElementById("sltid
可以用js代码添加li的内容吗_原生JS写一个ToDo Demo
weixin_39590566的博客
12-06 379
周六加班没什么事，于是乎。。。上班摸鱼，用原生JS写了一个ToDo Demo，废话少叙，直接看效果：如图，实现了以下需求（以下的具体实现我会一一道来）：0.页面的基本布局；1.rem布局。在不同移动端模拟器下，布局也不会乱，实现了响应式布局；2.在输入框内敲击回车键，添加代办事项；3.待办事项<===>完成事项之间的转化；4.删除待办事项 / 完成事项;5.本地数据存储；=======...
JS & JQuery 动态添加 select option
日拱一卒
12-08 792
JS：var selid = document.getElementById("sltid");        for(var i=0; i               sid.option[i] = new Option(i,i);        }        sid.options[sid.options.length]=new Option("1","2");  
关于js遍历list集合，获取select选中的值以及动态添加option
sfyflying的专栏
08-15 9766
1，js遍历list集合 js不能直接遍历list集合，可以在后台中将list集合封装成json格式 封装格式 JSONArray jsonArray = JSONArray.fromObject( list ); 然后在ajax中遍历json格式的数据 jQuery.each(data.list,function(i,item)){ var id=item.id; var na
php动态添加select option,js给datalist或select动态添加option详解
weixin_29758513的博客
03-21 342
有时需要从配置文件中读取信息，然后添加到用户的选择项中，比如select的option选项，本文主要为大家分享一篇利用js给datalist或select动态添加option选项的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。下面针对此类情况做了一个实例内容如下：鼠标点击时加载选择城市://需要添加的数据内容,可以通过ajax请求获取var cities ...
选择框使用的CSS的option datalist ID 为s01 ,选中其中option1 ,option2 和option3 时，table ID =t1 和t2 需要同时加亮，并且弹出消息提示。这个加亮要一直持续，除非选择了非option1 ,option2 和option3 。
07-15
可以使用 JavaScript 和 CSS 来实现这个需求。当下拉选择框的值发生变化时，检查选中的值是否是 option1、option2 或 option3，如果是，则给表格 t1 和 t2 添加一个类来实现加亮效果，并弹出消息提示。如果选中的值不是这三个选项，则移除加亮效果。 以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>下拉选择框示例</title> <style> .highlight { background-color: yellow; } </style> </head> <body> <select id="s01"> <option value="">请选择</option> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <table id="t1"> <tr> <td>行1</td> </tr> <tr> <td>行2</td> </tr> <tr> <td>行3</td> </tr> </table> <table id="t2"> <tr> <td>行4</td> </tr> <tr> <td>行5</td> </tr> <tr> <td>行6</td> </tr> </table> <script> var selectElement = document.getElementById('s01'); var table1Element = document.getElementById('t1'); var table2Element = document.getElementById('t2'); selectElement.addEventListener('change', function() { var selectedValue = selectElement.value; // 清除之前加亮的行 table1Element.classList.remove('highlight'); table2Element.classList.remove('highlight'); // 判断选中的值是否是 option1、option2 或 option3 if (selectedValue === 'option1' || selectedValue === 'option2' || selectedValue === 'option3') { // 添加加亮效果 table1Element.classList.add('highlight'); table2Element.classList.add('highlight'); // 弹出消息提示 alert('已选中 ' + selectedValue); } }); </script> </body> </html> ``` 在上述代码中，通过给下拉选择框绑定 `change` 事件，当选中值发生变化时，会触发事件处理函数。在事件处理函数中，首先清除之前加亮的行，然后判断选中的值是否是 option1、option2 或 option3。如果是，则给表格 t1 和 t2 添加一个类来实现加亮效果，并弹出消息提示。如果选中的值不是这三个选项，则移除加亮效果。 你可以根据实际情况修改代码中的 ID 和选项值来适应你的页面布局和需求。同时，你可以根据需要自定义加亮效果和消息提示的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值