html5 datalist 选中option选项后的触发事件
Posted xumblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 datalist 选中option选项后的触发事件相关的知识，希望对你有一定的参考价值。
参考博客: https://blog.csdn.net/qishuixian/article/details/78427951
最近一段时间用到了html5中datalist, 对选择的option选项获取对应的属性值.
<!DOCTYPE HTML> <html> <body> <script src="./jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> 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" onchange="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>
<!-- 选择option的value, 显示在input里, 然后获取对应的属性data-id -->
以上是关于html5 datalist 选中option选项后的触发事件的主要内容，如果未能解决你的问题，请参考以下文章