今天使用datalist标签时，想要获得选中的值，发现使用datalist标签上的val()输出结果一直都是空的

后面改用配套的input获得值

代码如下

<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

        <script>

                $(window).on('load', function () {

                        $('#check').click(function () {

                                alert($("#datalist_1").val());

                                alert($("#txt_1").val());

                        });

                }); 

        </script>

</head>

<body>

        <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"></option>

                <option data-id="data_3" value="val_3"></option>

        </datalist>

        <button id="check">check</button>

</body>

</html>

h5 datalist标签获取值的更多相关文章

  1. 前端 s 标签获取值

    1.  s标签获取action中的值: <s:property value="#parameters.mySessionPropKey"/> or <s:prop ...

  2. Struts2-使用forEach标签+el标签获取值栈数据

    import cn.web.body.User; import com.opensymphony.xwork2.ActionSupport; import java.util.ArrayList; i ...

  3. 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  4. 总结：如何获取同一个DIV里的多个不同子标签的值，并赋值给input？

    这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...

  5. jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式

    jQuery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) , 它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safa ...

  6. jQuery中获取a标签的值

    如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...

  7. JQuery each遍历A标签获取href 和 里面指定的值

    JQuery each遍历A标签获取href $('.scol_subject').each(function(){ var href = $(this).attr('href'); $(this). ...

  8. input/radio/select等标签的值获取和赋值

    input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择: 页面html: <div class=" " ...

  9. [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式

    reference : http://www.suyunyou.com/aid1657.html jQuery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后 ...

随机推荐

  1. LCP 2-分式化简

    LCP 2-分式化简 public int[] fraction(int[] cont) { int len = cont.length; int[] d = new int[]{cont[len - ...

  2. Visual Studio 问题汇总

    VS2019 16.3.6   1   JSON 文件没有进行格式化验证 开发时运行正常,部署在IIS中有错误提示. 2  .NET Core 3.0 没有提供中文包 所有注释都是英文的.

  3. 解决myeclipse2017ci7破解后闪退问题

    解决myeclipse2017ci7破解后闪退问题 打开myeclipse.ini修改为: #utf8 (do not remove)-startupplugins/org.eclipse.equin ...

  4. 认识Flow（一）

    Flow 是 facebook 出品的 JavaScript 静态类型检查工具.Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码. 为什么用 Flow J ...

  5. IDEA工具java开发之 运行与调试

    一.运行项目 ◆右键运行 ◆菜单运行 ◆run窗口运行 ◆启动参数 作用:经常用在本地开发环境要去连测试的数据库的时候使用.正常的情况下是连开发环境的数据库的,但是有些情况是需要连测试数据库的.所以这 ...

  6. Windows DOS下查看硬盘分区

    运行cmd Diskpart //加载 list Disk //列出硬盘 list Volume //列出分区 Select Disk //选择 编号0的硬盘 list Partition //列出当 ...

  7. Linux忘记 root密码的解决办法

    很多朋友经常会忘记Linux系统的root密码,linux系统忘记root密码的情况该怎么办呢?重新安装系统吗?当然不用!进入单用户模式更改一下root密码即可. 步骤如下: 重启linux系统 重启 ...

  8. Java修饰符类型

    转自原文:http://www.yiibai.com/java/java_modifier_types.html 修饰符是添加到这些定义来改变它们的含义的关键词. Java语言有各种各样修饰词,其中包 ...

  9. Win10激活工具 —— HWIDGen的使用方法

    一:引言 众所周知,Windows系统在安装完成之后,第一步就是激活系统,网上的一些激活方法大多数都是KMS激活,激活持续时间为半年. 因此,我找到了一个可以永久激活的工具:HWIDGen,它可以数字 ...

  10. ❀❀ selenium 学习网站 ★★★★★

    http://edu.51cto.com/course/course_id-7320.html   Selenium IDE WEB自动化测试入门视频课程(上)(共10课时)_在线自学视频教程_51C ...