今天使用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. 求素数p的原根

    定义: 设m>1,gcd(a,m)=1,使得成立的最小正整数d为a对模m的阶,记为δm(a) 如果δm(a)=φ(m),则称a是模m的原根 定理:设m>1,gcd(a,m)=1,那么正整数 ...

  2. H5 使用input标签上传图片给后台

    html代码: <div class="hpk-showimg"> <!-- 营业执照 --> <div class="idcardup&q ...

  3. 区间无修改莫队学习笔记（lg1494小z的袜子）

    这几天感觉要学的要做的有点多,就偷了个懒没写笔记,赶紧补一下 莫队嘛,一个离线处理各种区间(或树上)询问的神奇算法 简单而言,按左端点排个序然后指针l,r递推就好了 复杂度证明貌似是不待修改的n^1. ...

  4. [POI2005]KOS-Dicing （最大流+二分）lg3425

    题面https://www.luogu.org/problemnew/show/P3425 题面说赢的最多的人最少赢几场,肯定是向二分的方向思考 建立源点向每一场比赛连容量为1的边,从每场比赛向参赛两 ...

  5. 162.扩展User模型-使用Proxy模型

    扩展用户模型: Django内置的User模型虽然已经足够强大了,但是有时候还是不能满足我们的需求,比如在验证用户登录的时候,它用的是用户名作为验证,而我们有时候需要通过手机号码或者是邮箱进行验证,还 ...

  6. Sublime Text(代码编辑软件)

    特点 Sublime Text 3是一个轻量.简洁.高效.跨平台的编辑器,方便的配色以及兼容vim快捷键等各种优点: 它体积小巧,无需安装,绿色便携:它可跨平台支持Windows/Mac/Linux: ...

  7. VJ数论专题AC代码临时保存

    //A #include<bits/stdc++.h> using namespace std; bool vis[1000010]; void Get_Prime() { int n = ...

  8. python3读取、写入、追加写入excel文件

    由于excel版本不同,python处理的时候选择的库页不同. 一.操作对应版本表格需要用到的库 1.操作xls格式的表格文件,需要用到的库如下: 读取:xlrd 写入:xlwt 修改(追加写入):x ...

  9. 2020算法设计竞赛 I、匹配星星

    链接:https://ac.nowcoder.com/acm/contest/3005/I来源:牛客网 天上有n颗星星,每颗星星有二维坐标(xi,yi)(x_i, y_i)(xi​,yi​),还有一个 ...

  10. 记录 shell学习过程（5）continue break

    1.continue ;i<;i++)) do ];then continue fi echo $i done # ./continue.sh12346789 2.break ;i<;i+ ...