基于jquery 封装的 select 小控件，解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

一、基本原理

select控件在浏览器中是个永远的痛，不同的版本解析出来的可谓五花八门。主要有以下问题：

1,IE6中无法设置高度，Z INDEX永远在最上，无法被其它层遮挡

2,IE7中可以设置高度，但是实际显示高度永远是那么一点点高，下面留出大量的空白

3,IE8中高度可以设置，但文字不居中，LINE HEIGHT无效

4,IE9 IE10中相对正常些

尽管一些JS UI中有类似的COMBO控件，但都不如人意，大部分是要JS绑定数据，如果用这些控件，显然就没有办法使用WEBFORM的事件支持特性，死活不会让我 满意。网上也有很多解决方案，有讲怎么去边框的，如 margin:-2px;这种等，但都解决的不彻底，不让我满意。另外说的最多的一种也就是自己重新用DIV画一个，所以有了这个小控件。功能上就是将页 面上原有的SELECT 隐藏，然后用DIV画一个SELECT，并引用原SELECT的边框，底色，大小等属性，尽量保持和原定义样式一致，并且可以触发原select的 change事件，这样就能保证 DDL在开启 autoPostBack的时候，可以正常解决ASP。NET的后台事件。

说简单点，就是你原来的SELECT DDL该怎么定义怎么定义，该绑定数据就绑定数据，不用关心新画的SELECT是啥样的，该怎么控制，后台取值，你仍然去取原来控件的值就OK了。

 

二、主要用法及效果

目前功能和样式都没有大问题了，个别如IE6 7的高度和居中图有偏差，也就不费心修复了，各位自己设置尺寸，不要复制SELECT尺寸就可以了。有看官帮修复的，麻烦给个修复后的。

 

和其它jq控件一样，基本一行代码，下面是HTML

<style type="text/css">
        .common {
            background-color: pink;
            border: 1px solid red;
        }
    </style>
    <form id="form1" runat="server">
        <div>
            <select id="selArea" class="common" style=" 240px; height: 64px;">
                <option selected="selected">区域不限</option>
                <option>北京北京北京北京北京</option>
                <option value="tj">天津</option>
                <option value="sh">上海</option>
                <option value="cq">重庆</option>
            </select>
            <br />
            <asp:DropDownList ID="DropDownList1" CssClass="common" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem>111</asp:ListItem>
                <asp:ListItem>222</asp:ListItem>
                <asp:ListItem>333</asp:ListItem>
                <asp:ListItem>444</asp:ListItem>
            </asp:DropDownList>
        </div>
    </form>

<script type="text/javascript">
        $(document).ready(function () {
            $("select").yueSelect({
                 120,
                height: 32,
                useSelectSize: true,
                listDiff: 2
            });
        });
    </script>

width,height不解释

useSelectSize是指是不是要保留原select的尺寸，为true时width,height设置将不起作用。

listDiff是指下接框与主框之间的间隔修复，一般为2就可以了

 

看下效果

IE6

IE7

IE8

IE9 10

FF

 

 

三、下载

 

链接在这里

 

四、题外

 

从不愿写很多的文字性的东西，不过最近却有想法写一个系列的博客，却又懒的下不了决心。看看大家有多少感兴趣的，内容应可能是一个完整的企业框架或部分，可能会涉及一项或几项以下内容，有感兴趣的在下面留言，

1,EF的应用及封装，偏向 CODE FIRST

2,企业库部分组件、AUTOMAPPER等与WEBFORM的集成（MVC写的人太多了）

3,PAGE、WEBSERVICE等的利用UNITY的自动注入、AOP切面

4,权限系统实现对页面与按钮拦截与配置

5,一些CSS和JS UI框架的使用与BUG修复，如LIGER UI

6,NLayerAppV2领域驱动框架

………………

 

我相信没有人愿意写一份给自己看的博客 ，大家的留言与推荐才是写下去的动力