今天使用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. linux基础安全

    一.用户防护 Chage  -l  用户名   查看用户账号有效期信息 Chage  -E   时间   用户名   给用户设置过期时间 /etc/login.defs  文件保存许多默认设置 Pas ...

  2. 前端 form select js处理

    1.代码如下 function initializeSelect(data) { var area = $("#ServiceName"); area.find("opt ...

  3. Git学习笔记-上传一个新的项目到GitHub上

    前提: 已有Github账号,已在Github上建立了仓库,已在Github上配置了SSH,已上传过一些项目到Github上 目标: 目前有一个新的项目,需要上传到github上 我的做法记录: 1. ...

  4. python中一些相似用法的区别：index()和find()，dict[]和get()

    index和find在字符串中的区别: index()方法和find()方法相似,唯一的区别就是find方法不包含索引值会返回-1,而index()不包含索引值会抛出异常   同样的:获取字典dict ...

  5. Controller 和 Action -1

    https://www.cnblogs.com/willick/p/3331521.html MVC 的每个请求都会提交到 Controller 处理.Controller 包含了对请求的逻辑处理,能 ...

  6. [CF653F] Paper task - 后缀数组,线段树,vector

    [CF653F] Paper task Description 给定一个括号序列,统计合法的本质不同子串的个数. Solution 很容易想到,只要在传统统计本质不同子串的基础上修改一下即可. 考虑经 ...

  7. C语言-const和volatile深度分析

    1.const只读变量 const修饰的变量是只读的.本质还是变量 const修饰的局部变量在栈上分配空间 const修饰的全局变量在全局数据区分配空间 const只在编译期有用,在运行期无用 con ...

  8. python3练习100题——022

    为了周末轻松点,多做一些题. 原题链接:http://www.runoob.com/python/python-exercise-example22.html 题目:两个乒乓球队进行比赛,各出三人.甲 ...

  9. python3练习100题——006

    继续做题-经过py3测试 原题链接:http://www.runoob.com/python/python-exercise-example6.html 题目:斐波那契数列. 我的代码: def fi ...

  10. MFC对话框常用操作文章收藏

    1.改变控件文本 参考链接:https://blog.csdn.net/active2489595970/article/details/88856235 所有控件的文本都可以用这种方式动态改变. 2 ...