小编给大家分享一下怎么在html5实现datalist选中option选项的触发事件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

代码如下：

<!DOCTYPEHTML><html><body><scriptsrc="./jquery-1.7.2.min.js"type="text/javascript"charset="utf-8"></script><script>functioninputSelect(){varinput_select=$("#input").val();varoption_length=$("option").length;varoption_id='';for(vari=0;i<option_length;i++){varoption_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><inputlist="cars"id="input"οnchange="inputSelect()"/><datalistid="cars"><optionvalue="111"data-value="111"data-id="1"><optionvalue="122"data-value="122"data-id="2"><optionvalue="1222"data-value="1222"data-id="4"></datalist></body></html>

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

<!DOCTYPEHTML><html><body><scriptsrc="jquery-1.12.4.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">functioninputSelect(){varinput_select=$("#input").val();varafter_value=input_select.split(".");varnew_value=after_value[0]+"."+after_value[1]+"."+after_value[2]+".xxx";$("#input").val(new_value);varoption_length=$("#netsegments").find("option").length;vardata_id='';varfirstIp=1;varlastIp=255;for(vari=0;i<option_length;i++){varoption_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><inputlist="netsegments"id="input"onchange="inputSelect()"placeholder="xxx.xxx.xxx.xxx"/><datalistid="netsegments"><optionlabel="10.0.23.xxx"value="10.0.23.1~62"data-value="10.0.23.1~62"data-id="1"firstIp="1"lastIp="62"/><optionlabel="10.0.23.xxx"value="10.0.23.64~127"data-value="10.0.23.64~127"data-id="2"firstIp="63"lastIp="127"/><optionlabel="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选项的触发事件”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！