今天使用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. 在vue项目中显示实时时间（年月日时分秒）

    1.在data中定义一个变量,存储时间 data(){ return { nowTime:'' } }, 2.给定一个div <div>{{nowTime}}</div> 3. ...

  2. 杭电oj_2047——阿牛的EOF牛肉串（java实现）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2047 思路:先是列出了四个,但是没发现规律,然后开始画递归树,在其中找到了规律,算出递归式为f(n) ...

  3. Feign 不能注入报错及接口参数问题

    无法实例 解决方案: @EnableFeignClients(basePackages = "com.test.test.service") 要指定路径, 如果有设置@Compon ...

  4. C语言--“.”与“->”有什么区别？

    这虽然是个小问题,但有时候很容易让人迷惑,因为有的时候用混淆了,程序编译不通过.   下面说说我对它们的理解.   一般情况下用“.”,只需要声明一个结构体.格式是,结构体类型名+结构体名.然后用结构 ...

  5. 基本程序单元Activity

    Activity的4种状态,运行状态,暂停状态,停止状态,销毁状态,下面就是生命周期的顺序图 手动创建Activity 1.创建继承自Activity的Activity 2.重写需要的回调方法 3.设 ...

  6. SQL语法(UNION,JOIN)

    SQL语法 union, union all UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 注意,UNION 内部的每个SELECT语句必须拥有相同数量的列.列也必须拥有相似的数 ...

  7. 洛谷P1042 乒乓球

    https://www.luogu.org/problem/P1042 #include<bits/stdc++.h> using namespace std; ]; int w,l; i ...

  8. php设计模式之适配器模式实例代码

    <?php header("Content-type:text/html;charset=utf-8"); // 适配器模式 /** * 查看天气接口 */ class Ti ...

  9. 《深入理解Java虚拟机》读书笔记七

    第八章 虚拟机字节码执行引擎 1.运行时栈帧结构 概述: 栈帧是用于支持虚拟机进行方法调用的和方法执行的数据结构,他是虚拟机运行时数据区中的虚拟机栈的栈元素,栈帧存储了方法的局部变量,操作数栈,动态连 ...

  10. 如何在Word中排出漂亮的代码，去除回车符，去除拼写检查

    这位博主写到很到位,这里补充一下在VBA里用模块的部分. https://blog.csdn.net/code4101/article/details/41802715 1.放代码的方式是贴纯文本. ...