zoukankan      html  css  js  c++  java
  • html5 datalist 选中option选项后的触发事件

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



    原文:https://blog.csdn.net/qishuixian/article/details/78427951
     

  • 相关阅读:
    假如
    Find the peace with yourself
    Sep 15th 2018
    Sep 10th 2018
    third party sales process 继续说
    成功设置open live writer
    sublime text2 基本配置及结合Python 环境
    Compmgmtlauncher.exe问题解决方法
    nginx 代理服务器
    vmware之linux不重启添加虚拟硬盘
  • 原文地址:https://www.cnblogs.com/lxwphp/p/15453444.html
Copyright © 2011-2022 走看看