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>
时间: 2024-12-27 17:56:53

jquery模拟可输入的下拉框的相关文章

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

可输入的下拉框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>可输入的下拉框</title> <meta name="description" conten

Android 可以输入的下拉框

将AutoCompleteTextView与一个button组合起来,做成一个可以输入,也可以选择的下拉框. 下面是定义的xml文件,auto_spinner.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools=&

Html可以输入的下拉框设计

实现:设计出一个可以手动输入也可以下拉选择的控件. 思路: 在下拉控件的上方放置一个文本框,但是width要注意(显示出下拉按钮),所以下拉框和文本框的position属性都是absolute,下拉框选择ongchange事件,把选中的下拉项的值赋值给文本框,这时这个文本框既可以输入也可以被下拉选择(取下拉框的值)最终取文本框中的值. <table cellspacing="0" cellpadding="0" width="100%" b

自己编写jQuery插件 之 无限级联下拉框

因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的.每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加. 插件的实现代码如下: (function ($) { $.fn.CascadingSelect = function (options) { //默认参数设置

jquery的隐藏和显示——下拉框式

下拉框定义value值 后面写上onchange方法(onchange 事件会在域的内容改变时发生) 然后定义方法, 然后两个span解决.

jquery 获取和设置 select下拉框的值

<div style="display:block;text-align:left;margin-left:1em;"> <select id="uploadFrequency" style="width:50%;font-size:1em;" onchange="changeFunction()"> <option value="-1" selected="sele

jquery实现可编辑的下拉框( input + select )

HTML: <input id="inputModel" /> <select name="EngineModel" size="10" style="height: auto; margin-left: 120px; position: absolute; display: none;"></select> Jquery: //获取select var engine = $('select

jQuery自动显示搜索下拉框

描述:当用选择查询时,根据输入的关键字动态从后台模糊查询,把结果异步显示在前端. jsp代码; <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String