jQuery模拟select下拉框方法总结

时间：2022-11-14 22:03:18 编辑：袖梨来源：一聚教程网

例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 其它

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

推荐专题

最新下载

热门教程

jQuery模拟select下拉框方法总结

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程