jquery模拟可输入的下拉框

2021-07-12 02:06

阅读:561

标签:split   comment   function   select   target   com   dex   comm   inpu   

//页面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;ivar 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>

jquery模拟可输入的下拉框

标签:split   comment   function   select   target   com   dex   comm   inpu   

原文地址:http://www.cnblogs.com/liguangsunls/p/7083329.html


评论


亲,登录后才可以留言!