jQuery/Zepto.js获取datalist元素指定option选项的属性值

最新推荐文章于 2022-04-18 17:57:03 发布
最新推荐文章于 2022-04-18 17:57:03 发布
阅读量1.1w 收藏 6
点赞数 2
分类专栏： 前端 文章标签： 前端 datalist option 属性值 选择项
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huzexin/article/details/79011368
版权

摘要

本文主要通过一个简单示例，介绍了获取datalist元素指定option选项属性值的方法，同时提供了相关源码。


背景

页面上有input元素及关联的datalist的元素，datalist元素中有许多option选项，各选项各有value值及对应的data-id属性，HTML如下：

<input id="txt_1" list="datalist_1"/>

<datalist id="datalist_1">
    <option data-id="data_1" value="val_1"></option>
    <option data-id="data_2" value="val_2
最低0.47元/天 解锁文章
叶子竹
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
h5 datalist标签获取值
weixin_30852451的博客
06-17 2137
今天使用datalist标签时，想要获得选中的值，发现使用datalist标签上的val()输出结果一直都是空的 后面改用配套的input获得值 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn....
zepto：Zepto.js是适用于现代浏览器的简约JavaScript库，具有jQuery兼容的API
02-12
Zepto.js –简约JavaScript库Zepto是用于现代浏览器的极简JavaScript库，具有与jQuery兼容的API。 如果使用jQuery，您已经知道如何使用Zepto。 有关的介绍，下载和文档，请 。 Zepto.js是根据MIT许可条款获得许可的...
前台input----dataList下拉选择（可输入的input下拉列表）/获取被选中的值
qq_41981122的博客
09-08 2321
<td style="width:15%"> <input type="text" value="" name="deptName" style="width: 98%;border:0px;outline:none" placeholder="请选择部门" list="dataList"/> <datalist id="dataList"> <div name="departmentDrop"><.
获取或设置datalist内的控件的属性和值
爱在梦想有希望
07-24 1498
 呵呵，如题！在实际项目中，遇到需要设置datalist控件内的一个label控件的值，最后终于找到解决的办法了！ 开发环境为：VS2005 网上的有些方法是不对的，我试了可是就是不行，原来很多的都是方法用错了！下面给出详解！ 首先，事件一定要写在DataList的ItemCreated事件中，网上说的其它事件好像不行！ 代码如下： protected vo
html列表的列选择事件,html5 datalist 选中option选项后的触发事件
weixin_39973196的博客
06-03 257
使用input + datalist 实现自动补全功能，其中datalist中的内容是根据input输入的内容动态变换的，代码如下function inputSelect(){var input_select=$("#input").val();var option_length=$("option").length;var option_id='';for(var i=0;ivar option...
可以用js代码添加li的内容吗_原生JS写一个ToDo Demo
weixin_39590566的博客
12-06 348
周六加班没什么事，于是乎。。。上班摸鱼，用原生JS写了一个ToDo Demo，废话少叙，直接看效果：如图，实现了以下需求（以下的具体实现我会一一道来）：0.页面的基本布局；1.rem布局。在不同移动端模拟器下，布局也不会乱，实现了响应式布局；2.在输入框内敲击回车键，添加代办事项；3.待办事项<===>完成事项之间的转化；4.删除待办事项 / 完成事项;5.本地数据存储；=======...
js 获取 DataList的TextBox
小而美
02-10 1931
(1)javascript:    //获取btn事件 function addbtn(obj) { var tb=obj.value;//验证是不是数值var check=/^[0-9]*[1-9][0-9]*$/;if(!check.test(tb)){alert("请输入数字！");return false;}else{ var btn=document.getElementById("
JS 获取筛选过的list item的某些属性
坐等夕阳落time的博客
04-18 1399
前言 接口是一次性返回所有的分类的，所以得要前端这边自己处理数据 最终效果 3列联动选择 uniapp 的select 选择器，固定死字段名了，所以我们 还需要给接口返回的字段重新命名 实现 活用list 的map(),filter(),方法 <u-select v-model="isPlatforationSelectShow" mode="mutil-column-auto" :list="platformCategorysList" @confirm="confirm".
仅作笔记用: HTML5 datalist 使用jquery快速获取选中项元素
wujiuqier的博客
10-29 2677
注意到获取datalist目前仍然比较多的使用遍历datalist里面的option来获取选中项的元素(DOM). 如果项目数量比较多的时候效率会比较慢. 如果页面引用的有jquery的话可以直接使用jquery的选择器来快速获取选中项元素. 范例: 已经给一个input输入 框绑定了一个datalist, 现希望在change事件弹出对话框显示datalist选中项的标题. HTML: <...
jQuery插件zepto.js简单实现tab切换
10-24
主要介绍了jQuery插件zepto.js简单实现tab切换的代码，十分的简洁，有需要的小伙伴可以参考下
datalist用法详解
06-13
datalist基本用法以及增、删、改、查
基于zepto.js简单实现上传图片
10-22
在本文中，我们将深入探讨如何使用Zepto.js这个轻量级的JavaScript库来实现一个简单的图片上传功能。Zepto.js是专门为移动设备设计的一个类似jQuery的库，它提供了丰富的DOM操作和事件处理功能，适用于移动端的Web...
Zepto.js移动端左右滑动导航菜单.zip
07-04
标题中的“Zepto.js移动端左右滑动导航菜单”是指一个基于Zepto.js库开发的，专为移动设备设计的交互式导航菜单。该菜单具备左右滑动的功能，允许用户通过在屏幕上向左或向右滑动来切换不同的导航选项。在iOS和...
zepto.js手机端网页上下手指滑动图片切换效果代码.zip
08-23
zepto.js是一款轻量级的JavaScript库，专为移动设备的Web开发设计，它提供了类似于jQuery的API，但在体积上更小，更适合移动端的性能优化。这个压缩包"zepto.js手机端网页上下手指滑动图片切换效果代码.zip"包含了...
jQuery、zepto、js常用小技巧
10-20
在JavaScript的世界里，jQuery、Zepto.js和原生JavaScript提供了许多实用的小技巧，这些技巧能够帮助开发者更加高效地编写代码。以下是一些关于这三种技术的常见小技巧和最佳实践。 1. **jQuery 和 Zepto.js 判断...
获取DataList中绑定的值的方法
cuibinmo3519的博客
12-18 651
获取DataList中绑定的值的方法 其实很简单，大家直接看以下方法吧： 1，在.cs代码中写入： public string GetValue(string value) { return v...
php动态添加select option,使用js如何给select动态添加option（详细教程）
weixin_39530647的博客
03-21 258
下面我就为大家分享一篇利用js给datalist或select动态添加option选项的方法，具有很好的参考价值，希望对大家有所帮助。有时需要从配置文件中读取信息，然后添加到用户的选择项中，比如select的option选项，下面针对此类情况做了一个实例内容如下：鼠标点击时加载选择城市://需要添加的数据内容,可以通过ajax请求获取var cities = [{label:"xian",valu...
datalist 元素
酷小亚
09-30 349
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>datalist 元素</title> </head> <body> <form action="#" method="post"> 请输入用户名： <input type="text" list="namelist" /> &.
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值