用jQuery模拟select下拉框的简单示例代码


Posted in Javascript onJanuary 26, 2014

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>自己实现的下拉框</title>
    <style type="text/css" media="all">
        *{font-size:12px;line-height:18px;list-style:none;padding:0;margin:0;text-decoration:none;color:#000;border:0}
        .page{text-align:center;margin:50px;}
        input{border-bottom:solid 1px #ccc;height:18px}              
        .expand{display:none;position:absolute;width:200px;height:100px;overflow-y:auto;border:solid 1px #ccc};
  .expand li{margin:1px 0;background:#fff}
        .expand a{text-decoration:none;display:block;padding:0 5px;background:#efefef;margin:1px 0}
        .expand a:hover{background:#ff9}
    </style>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
    <script type="text/javascript">
        function showExpand(targetId, expandId, expand_class) {
            //先关掉其它弹出的层
            if (expand_class != undefined) {
                $("." + expand_class).hide();
            }
            //判断是否为IE
            var isIE = (! +[1, ]);
            var expand = $("#" + expandId);
            var target = $("#" + targetId);
            var dx = 0;
            if (isIE) {
                dx = -2;
            }
            else {
                dx = 0;
            }
            expand.get(0).style.left = target.get(0).getBoundingClientRect().left + dx + "px";
            if (isIE) {
                dx = 17;
            }
            else {
                dx = 19;
            }
            expand.get(0).style.top = parseInt(target.get(0).getBoundingClientRect().top) + dx + "px";
            expand.show();
            //每个li点击时赋值
            $("#" + expandId).find("li").each(function (i) {
                $(this).show().click(function () {
                    target.val($(this).text().split(' ')[1]);
                    expand.hide();
                })
            })
    
        }
  
        function search(srcId, expandId) {
            var expand = $("#" + expandId);
            var src = $("#" + srcId);
            var A = expand.find("a");
            var v = src.val().toUpperCase();
            A.each(function (i) {
                if (v.length >= 2) {
                    if ($(this).text().toUpperCase().indexOf(v) == -1) {
                        $(this).parent().hide();
                    }
                    else {
                        $(this).parent().show();
                    }
                }
                if (v.length <= 0) {
                    $(this).parent().show();
                }
            })
            src.val(v);
        }

  $().ready(function(){
   $("#txt_city").keyup(function(){
    search('txt_city','city_select1');
   }).focus(function(){
    showExpand('txt_city','city_select1','expand')
   })
   $("#txt_city2").keyup(function(){
    search('txt_city2','city_select2');
   }).focus(function(){
    showExpand('txt_city2','city_select2','expand')
   })
  })
  function fnTest(){
   document.getElementById("txtTarget").value = document.getElementById("txtSrc").value;
  }
    </script>
</head>
<body>
    <div class="page" style="text-align: center">
        <input type="text" value="" id="txt_city" class="input_expand"  /><a
            href="#" onclick="showExpand('txt_city','city_select1','expand')">?</a>
        <div class="expand" id="city_select1">
            <ul>
                <li><a href="javascript:void(0)">SH 上海</a></li>
                <li><a href="javascript:void(0)">BJ 北京</a></li>
                <li><a href="javascript:void(0)">HZ 杭州</a></li>
                <li><a href="javascript:void(0)">WH 武汉</a></li>
                <li><a href="javascript:void(0)">NJ 南京</a></li>
                <li><a href="javascript:void(0)">WX 无锡</a></li>
            </ul>
        </div>
        <input type="text" value="" id="txt_city2" class="input_expand"  /><a
            href="#" onclick="showExpand('txt_city2','city_select2','expand')">?</a>
        <div class="expand" id="city_select2">
            <ul>
                <li><a href="javascript:void(0)">CN 中文</a></li>
                <li><a href="javascript:void(0)">EN 英语</a></li>
                <li><a href="javascript:void(0)">JP 日本</a></li>
                <li><a href="javascript:void(0)">RA 俄语</a></li>
                <li><a href="javascript:void(0)">FA 法语</a></li>
                <li><a href="javascript:void(0)">00 其它</a></li>
            </ul>
        </div>
  <br/>
  <br/>
  <input type="text" id="txtSrc" onkeyup="fnTest()" />
  <br/>
  <input type="text" id="txtTarget" />
    </div>
</body>
</html>

无图无真相,真相在此:
用jQuery模拟select下拉框的简单示例代码
不足之处:
1、按键盘上下键时,没有高亮的自动移动
2、键入文字自动过滤结果时,感觉相对原生的select有些不自然
Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 #Javascript
javascript:json数据的页面绑定示例代码
Jan 26 #Javascript
jQuery focus和blur事件的应用详解
Jan 26 #Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 #Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 #Javascript
使用javascript为网页增加夜间模式
Jan 26 #Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
谈一谈jQuery核心架构设计
2016/03/28 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python的Lambda函数用法详解
2019/09/03 Python
如何在python中写hive脚本
2019/11/08 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python输出数学符号实例
2020/05/11 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
医院检讨书范文
2014/02/01 职场文书
班班通项目实施方案
2014/02/25 职场文书
预备党员半年考察意见
2015/06/01 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Django中celery的使用项目实例
2022/07/07 Python