jQuery模拟select下拉框方法总结

例1，利用div+ul实现实例

因为在IE6下，表单元素select的高度实在不好控制，即使让其和其他元素看起来一样高宽相符，那也仅仅是通过内边距进行的一种视觉误差实现的，而且呢，select控件的滚动条也难看。
正是如此，才会有很多人用div+ul来模拟select下拉框。

HTML代码如下,简简单单，一个外div，嵌套一个input和一个ul列表(input用于提交选中的数据)：

   

 代码如下 复制代码
<!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=utf-8" />
    <title>div+ul模拟select下拉框</title>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    </head>
    <body>
    <div class="i_select">
    <input id="h_x" type="text" value="户型" />
    <ul>
    <li>单间</li>
    <li>两居室</li>
    <li>三居室</li>
    <li>四居室</li>
    </ul>
    </div>
    </body>
    </html>
    <pre>
    

    样式大家可以自行美化，我就简单写了下面的Css
 

 代码如下 复制代码
   <pre lang="css">
    *{
    margin:0;
    padding:0;
    }
    li{
    list-style:none;
    }
    body{
    font-size:12px;
    }
    .i_select{
    margin:50px;
    position:relative;
    }
    .i_select input{
    display:block;
    cursor:pointer;
    width:75px;
    height:20px;
    padding-right:25px;
    text-align:center;
    background:url(images/select_bg.gif) no-repeat right -22px;
    }
    .i_select ul{
    position:absolute;
    left:0;
    top:22px;
    width:80px;
    background:#fff;
    border:solid #ccc;
    border-width:1px 1px 1px 2px;
    border-top:1px solid #fff;
    display:none; /*暂且将列表隐藏，后面点击才出现 */
    }
    .i_select ul li{
    height:24px;
    line-height:24px;
    width:80px;
    text-align:center;
    cursor:pointer;
    }

列表没隐藏之前的效果：
div+ul模拟select的html

 代码如下 复制代码

    //简单的几句jquery，不过记得引入jQuery框架
    $(function(){
    $('.i_select input').click(function(){
    var thisinput=$(this); // 将this保存到变量
    var thisul=$(this).parent().find('ul'); // 从this的父元素中查找到ul表单，并保存到变量
    thisul.fadeIn(300).hover(function(){},function(){$(this).fadeOut(300)}); /* 点击$('.i_select input')后，ul列表淡入，鼠标经过后离开之后，ul列表淡出 */
    thisul.find('li').click(function(){
    thisinput.val($(this).text()); //点击li后，将input的值更改为当前li的值
    thisul.fadeOut(100); //最后，ul列表消失
    });
    });
    });

完整代码(排版有点乱):

 代码如下 复制代码

 

    <!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=utf-8" />
    <title>div+ul模拟select下拉框</title>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    li{
    list-style:none;
    }
    body{
    font-size:12px;
    }
    .i_select{
    margin:50px; 
    position:relative;
    }
    .i_select input{
    display:block;
    cursor:pointer;
    width:75px;
    height:20px;
    padding-right:25px;
    text-align:center;
    background:url(images/select_bg.gif) no-repeat right -22px;
    }
    .i_select ul{
    position:absolute;
    left:0;
    top:22px;
    width:80px;
    background:#fff;
    border:solid #ccc;
    border-width:1px 1px 1px 2px;
    border-top:1px solid #fff;
    display:none; /*暂且将列表隐藏，后面点击才出现 */
    }
    .i_select ul li{
    height:24px;
    line-height:24px;
    width:80px;
    text-align:center;
    cursor:pointer;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('.i_select input').click(function(){
    var thisinput=$(this); // 将this保存到变量
    var thisul=$(this).parent().find('ul'); // 从this的父元素中查找到ul表单，并保存到变量
    thisul.fadeIn(300).hover(function(){},function(){$(this).fadeOut(300)}); /* 点击$('.i_select input')后，ul列表淡入，鼠标经过后离开之后，ul列表淡出 */
    thisul.find('li').click(function(){
    thisinput.val($(this).text()); //点击li后，将input的值更改为当前li的值
    thisul.fadeOut(100); //最后，ul列表消失
    });
    });
    });
    </script>
    </head>
    <body>
    <div class="i_select">
    <input id="h_x" type="text" value="户型" />
    <ul>
    <li>不限</li>
    <li>单间</li>
    <li>两居室</li>
    <li>三居室</li>
    <li>四居室</li>
    </ul>
    </div>
    </body>
    </html>

例二，利用jquery div实例

 代码如下 复制代码

<!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>

不足之处：
1、按键盘上下键时，没有高亮的自动移动
2、键入文字自动过滤结果时，感觉相对原生的select有些不自然

时间： 2024-08-16 09:42:34

jQuery模拟select下拉框方法总结的相关文章

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

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

用jQuery模拟select下拉框

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

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

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

jQuery操作select下拉框的text值和value值的方法_jquery

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

基于jQuery的select下拉框选择触发事件实例分析_jquery

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

jquery实现select下拉框美化特效代码分享_javascript技巧

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

利用jquery获取select下拉框的值_jquery

jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>

jquery中select下拉框按首字母或拼音筛选

 代码如下 复制代码 <html> <head>     <title>列表筛选</title> <script type="text/javascript" src="jQuery19.js"></script> <script type="text/javascript" ></script> <script type="text/

【js:片断】jQuery 设置 select 下拉框的选中状态

<mce:script type="text/javascript"><!-- function change(objID, newValue) { var obj = $("#" + objID); if (!obj) { alert("对象为空,执行返回!"); return; } var options = obj.find("option"); options.each(function (i) {