用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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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中的Memcache详解
2014/04/05 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Js 中debug方式
2010/02/07 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python计算IV值的示例讲解
2020/02/28 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
小学生自我评价100字(15篇)
2014/09/18 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
北京天坛导游词
2015/02/12 职场文书
2015年人事科工作总结
2015/04/28 职场文书
美丽的大脚观后感
2015/06/03 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS