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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python中动态创建类实例的方法
2017/03/24 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
关于美容院的活动方案
2014/08/14 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
师范生见习报告
2014/10/31 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
深入理解Pytorch微调torchvision模型
2021/11/11 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers