jQuery模拟select下拉框方法总结

作者：袖梨 2022-11-14

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.***w3.org/TR/REC-html40/loose.dtd">

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.**w*3.org/TR/REC-html40/loose.dtd">

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

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

代码如下	复制代码
div+ul模拟select下拉框单间两居室三居室四居室

样式大家可以自行美化，我就简单写了下面的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列表消失
});
});
});

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

代码如下

复制代码

div+ul模拟select下拉框

不限

单间

两居室

三居室

四居室

例二，利用jquery div实例

代码如下	复制代码
自己实现的下拉框 href="#" onclick="showExpand('txt_city','city_select1','expand')">? SH 上海 BJ 北京 HZ 杭州 WH 武汉 NJ 南京 WX 无锡 href="#" onclick="showExpand('txt_city2','city_select2','expand')">? CN 中文 EN 英语 JP 日本 RA 俄语 FA 法语 00 其它