html5 datalist 选中option选项后的触发事件


Posted in HTML / CSS onMarch 05, 2020

使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下

<!DOCTYPE HTML>
<html>
<body>
<script src="./jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
function inputSelect(){
 var input_select=$("#input").val();
 var option_length=$("option").length;
 var option_id='';
 for(var i=0;i<option_length;i++){
  var option_value=$("option").eq(i).attr('data-value');
  if(input_select==option_value){
   option_id=$("option").eq(i).attr('data-id');
   break;
  }
 }
 console.log(input_select,option_length,option_id);
};
</script>
<input list="cars"  id="input" οnchange="inputSelect()"/>
<datalist id="cars">
 <option value="111" data-value="111"  data-id="1">
 <option value="122"  data-value="122" data-id="2">
 <option value="1222" data-value="1222" data-id="4">
</datalist>
</body>
</html>

html5中datalist, 对选择的option选项获取对应的属性值.

<!DOCTYPE HTML>
<html>
<body>
<script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function inputSelect(){
    var input_select = $("#input").val();
    var after_value = input_select.split(".");
    var new_value = after_value[0] + "." + after_value[1] + "." + after_value[2] + ".xxx";
    $("#input").val(new_value);
    var option_length = $("#netsegments").find("option").length;
    var data_id = '';
    var firstIp = 1;
    var lastIp = 255;
    for(var i = 0; i < option_length; i++){
        var option_value = $("option").eq(i).attr('data-value');
        if(input_select == option_value){
            data_id = $("option").eq(i).attr('data-id');
            firstIp = $("option").eq(i).attr('firstIp');
            lastIp = $("option").eq(i).attr('lastIp');
            break;
        }
    }
    console.log("input_select:" + input_select + ",option_length:" + option_length);
    console.log("data_id:" + data_id + ",firstIp:" + firstIp + ",lastIp:" + lastIp);
};</script>
<input list="netsegments" id="input" onchange="inputSelect()" placeholder="xxx.xxx.xxx.xxx" />
<datalist id="netsegments">
    <option label="10.0.23.xxx" value="10.0.23.1~62" data-value="10.0.23.1~62"  data-id="1" firstIp="1" lastIp="62" />
    <option label="10.0.23.xxx" value="10.0.23.64~127"  data-value="10.0.23.64~127" data-id="2" firstIp="63" lastIp="127" />
    <option label="10.0.23.xxx" value="10.0.23.129~192" data-value="10.0.23.129~192" data-id="3" firstIp="129" lastIp="192" />
</datalist>
</body>
</html>

<!-- 选择option的value, 显示在input里, 然后获取对应的属性data-id, firstIp, lastIp -->
测试结果如下:
当选择第二个选项时候, console打印出结果:
  input_select:10.0.23.64~127,option_length:3
  data_id:2,firstIp:63,lastIp:127

html5 datalist 选中option选项后的触发事件

html5 datalist 选中option选项后的触发事件

到此这篇关于html5 datalist 选中option选项后的触发事件的文章就介绍到这了,更多相关html5 datalist 选中option 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 #HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 #HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 #HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 #HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 #HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 #HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 #HTML / CSS
You might like
php实现文件下载代码分享
2014/08/19 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
js实现简单的倒计时
2021/01/28 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
中秋晚会策划方案
2014/06/12 职场文书
汽车维修求职信
2014/06/15 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers