基於jquery 封裝的 select 小控件，解決 IE6 7 8里 select 邊框高度無法遮擋等問題

本文轉載自查看原文 2013-01-25 11:14 2261 JQuery

一、基本原理

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>

width,height不解釋

useSelectSize是指是不是要保留原select的尺寸，為true時width,height設置將不起作用。

listDiff是指下接框與主框之間的間隔修復，一般為2就可以了

看下效果

IE6