zoukankan      html  css  js  c++  java
  • jquery模拟可输入的下拉框

    //页面html
    <div id="select" class="select" >
                                  <ul>
                                    <c:forEach items="${movieCityList}" var="cy" varStatus="st">
                                        <li>
                                            <a href="javascript:void(0)" onclick="selectOption($(this))">${cy.cityName}</a>
                                            <input style="display: none;" name="cityCode" id="cityCode${st.count }" value="${cy.vasCityId}"/>
                                        </li>
                                    </c:forEach>
                                  </ul>
                                </div>
    //jquery代码
    <script type="text/javascript">
    
                //城市下拉框函数
                function getData(){//获取全部城市数据
                    var data=new Array();
                    $(".select a").each(function(i){
                        data[i]=$(this).html();
                    });
                    return data;
                }
                function judgeLength(l){//依据结果显示下拉框高度
                    if(l>5){
                        $(".select").css("height","100px");
                    }else{
                        $(".select").css("height",l*20+"px");
                    }
                }
                function selectOption(obj){//选中
                    $("#cityName").val(obj.html());
                    $("#cityId").val(obj.next("input").val());
                    $(".select").hide();
                    loadCinemalName();
                }
                function onFocus(){//input标签获取焦点
                    var l=getData().length;
                    if($('#cityName').val()==''){
                        judgeLength(l);
                    $(".select").show();
                    }else{
                        var obj=$("#cityName");
                        onKeyUp(obj);
                    }
                }
                function onKeyUp(obj){//input keyup事件
                    var input=obj.val()+'';
                    $(".select li").hide();
                    var height=0;   
                    var data=getData();
                    var l=getData().length;
                    if(input!=''){//输入时动态检索是否存在所输入的城市
                        for(var i=0;i<data.length;i++){
                            var str=data[i]+"";
                            if(str.indexOf(input)!=-1){
                                height++;
                                judgeLength(height);
                                $(".select").show();
                                $(".select li:eq("+i+")").show();
                                var cityId=$(".select li:eq("+i+") input").val();
                                $("#cityId").val(cityId);
                            }
                        }
                        loadCinemalName();
                    }else{
                        judgeLength(l);
                        $(".select li").show();
                    }
                }
                function onBlur(e){//失去焦点时隐藏下拉框
                    alert(e.target);
                    //$(".select").hide();
                }
            </script>
  • 相关阅读:
    VS2010插件及快捷键设置
    在Windows程序中启用console输出-2016.01.04
    使用VAssistX给文件和函数添加注释-2015.12.31
    windows在远程桌面连接中使用命令行参数
    windows网络编程-2015.12.29
    grep使用
    linux程序调试常用命令
    vim使用笔记
    infusion度量金字塔数据解释
    MVc Forms Membership rolemanage 角色权限验证管理
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/7083329.html
Copyright © 2011-2022 走看看