今天使用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. data_analysis 第一课

    1.anaconda的安装与使用 在官网下载anaconda的客户端,因为python有2和3之分,所以有两个版本可以供选择,由于该课程使用2作为开发工具,选择anaconda2下载安装. 安装好之后 ...

  2. 数据预处理 | 使用 OneHotEncoder 及 get_dummuies 将分类型数据转变成哑变量矩阵

    [分类数据的处理] 问题: 在数据建模过程中,很多算法或算法实现包无法直接处理非数值型的变量,如 KMeans 算法基于距离的相似度计算,而字符串则无法直接计算距离 如: 性别中的男和女 [0,1] ...

  3. Matlab技巧1：在同一坐标系上绘制两个函数图像

    x=-:; y1=sqrt(*abs(x)-x.^); y2=asin(abs(x)-)-pi/; plot(x,y1,'r',x,y2,'b') grid 程序结果:

  4. PM2的参数配置

    https://github.com/jawil/blog/issues/7 配置项: name  应用进程名称:script  启动脚本路径:cwd  应用启动的路径,关于script与cwd的区别 ...

  5. numpy学习(三)

    练习篇(Part 3) 31. 略 32. Is the following expressions true? (★☆☆) np.sqrt(-1) == np.emath.sqrt(-1) prin ...

  6. RN开发-组件View，Text

    1.外联js文件(RN自定义组件)        module.exports=Header; 导出模块         const Header=require('./header'); 导入外部j ...

  7. Docker最全教程——从理论到实战（十四）

    本篇教程主要讲解基于容器服务搭建TeamCity服务,并且完成内部项目的CI流程配置.教程中也分享了一个简单的CI.CD流程,仅作探讨.不过由于篇幅有限,完整的DevOps,我们后续独立探讨. 为了降 ...

  8. vue学习指南：第十五篇(详细) - Vuex

    Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 ...

  9. bugku 这么多数据包

    看到之后有点懵逼 然后下载 下载之后发现是一个pacp后缀的流量数据包 然后用wireshark 然后只想到了 http过滤 然后发现不对 然后参考其他人的博客 经大佬提示, 一般 getshell ...

  10. Python实现共享内存通信方式

    创建共享内存python文件: import mmap import contextlib import time with contextlib.closing(mmap.mmap(-1, 100, ...