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

来源：互联网发布：创维46e60hr 网络酷开编辑：程序博客网时间：2024/05/21 10:06

使用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" 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>

阅读全文

0 0