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

时间：2016-03-07 16:53:52 阅读：146 评论：0 收藏：0 [点我收藏+]

一、基本原理

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="width: 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({
                width: 120,
                height: 32,
                useSelectSize: true,
                listDiff: 2
            });
        });
    </script>