码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-05-27 17:53:59      阅读:727      评论:0      收藏:0      [点我收藏+]

标签:选项   csdn   src   var   datalist   query   jquery   details   body   

参考博客:  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选项后的触发事件

标签:选项   csdn   src   var   datalist   query   jquery   details   body   

原文地址:https://www.cnblogs.com/xumBlog/p/10931989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!