很多人為select的諸多不完善而頭痛，如無(wú)法自定義樣式、IE6中無(wú)法被浮動(dòng)層遮住等等。下面介紹一款堪稱最完美的下拉框組件：UU人下拉框

特點(diǎn)1：美化的并且可自定義的外觀
UU人下拉框使用JS進(jìn)行渲染。當(dāng)頁(yè)面引入了腳本和CSS后，頁(yè)面中的下拉框都會(huì)變成如下外觀：

2010-12-24 16:03 上傳

下載附件 (11.84 KB)

該外觀是由CSS和圖片控制。通過(guò)修改CSS可以很方便地實(shí)現(xiàn)更改外觀。
UU人下拉框不存在IE6中無(wú)法被浮動(dòng)層遮住等問(wèn)題。

特點(diǎn)2：使用簡(jiǎn)單
UU人下拉框代碼寫法與原來(lái)的寫法一樣，都是如下代碼：
<select>
        <option value="">請(qǐng)選擇功能</option>
    <option value="1">新增圖片</option>
    <option value="2">維護(hù)圖片</option>
    <option value="3">新增新聞</option>
</select>

也可以動(dòng)態(tài)創(chuàng)建UU人下拉框。

特點(diǎn)3：寬度處理
你是否遇到以下兩種情況：
（1）不設(shè)置下拉框?qū)挾�，那么下拉框�(qū)挾饶�認(rèn)為最寬的選項(xiàng)的寬度。當(dāng)其選項(xiàng)過(guò)長(zhǎng)時(shí)輕則會(huì)導(dǎo)致整個(gè)表單不整齊，重則會(huì)撐壞頁(yè)面布局；
（2）設(shè)置下拉框?qū)挾龋�但是由于下拉框的選項(xiàng)寬度有可能會(huì)很長(zhǎng)，可能會(huì)導(dǎo)致內(nèi)容顯示不完全。

UU人下拉框?qū)τ趯挾鹊奶幚矸绞绞牵耗�認(rèn)會(huì)有一個(gè)寬度，即使選項(xiàng)里面有很長(zhǎng)的文字。效果如下：

2010-12-24 16:03 上傳

下載附件 (11.3 KB)

這樣就保證了表單元素寬度一致又不影響內(nèi)容。放在表單中的整體效果如下：

2010-12-24 16:03 上傳

下載附件 (36.4 KB)

如果希望下拉框的寬度自適應(yīng)最長(zhǎng)選項(xiàng)，為其設(shè)置一個(gè)參數(shù)即可，效果如下：

2010-12-24 16:03 上傳

下載附件 (12.81 KB)

另外還可以通過(guò)style強(qiáng)制一個(gè)寬度。

特點(diǎn)4：支持分組
下拉框支持分組，代碼與普通select分組代碼一樣。如
<select>
        <option>請(qǐng)選擇權(quán)限</option>
        <optgroup label="首頁(yè)信息發(fā)布">
                <option value="新增圖片">新增圖片</option>
                <option value="維護(hù)圖片">維護(hù)圖片</option>
                <option value="新增新聞">新增新聞</option>
        </optgroup>
        <optgroup label="人員維護(hù)">
                 <option value="新增用戶">新增用戶</option>
         <option value="用戶列表">用戶列表</option>
        </optgroup>
</select>
效果如下：

2010-12-24 16:03 上傳

下載附件 (10.28 KB)

特點(diǎn)5：下拉列表展開(kāi)的方向智能化
原始的下拉框如果在網(wǎng)頁(yè)中的位置比較偏下，向下展開(kāi)肯能會(huì)導(dǎo)致內(nèi)容顯示不全。
UU人下拉框在這種情況會(huì)進(jìn)行智能判斷從而向上展開(kāi)。效果如下：

2010-12-24 16:03 上傳

下載附件 (10.61 KB)

當(dāng)下拉列表選項(xiàng)過(guò)多，向上也無(wú)法展示完全時(shí)，UU人下拉框會(huì)判斷一下向上和向下哪里空間大，就向哪里展開(kāi)，并出現(xiàn)滾動(dòng)條。效果如下：

2010-12-24 16:03 上傳

下載附件 (17.49 KB)

特點(diǎn)6：下拉框可編輯
為下拉框代碼添加一個(gè)屬性，就把它變成了一個(gè)可編輯的下拉框，效果如下：

2010-12-24 16:03 上傳

下載附件 (3.79 KB)

特點(diǎn)7：集成了ajax聯(lián)動(dòng)功能
通過(guò)設(shè)置可以很簡(jiǎn)單地實(shí)現(xiàn)下拉框聯(lián)動(dòng)功能。可支持的聯(lián)動(dòng)級(jí)數(shù)為無(wú)限級(jí)！
例如如下代碼就創(chuàng)建了一個(gè)二級(jí)聯(lián)動(dòng)的下拉框：
所學(xué)專業(yè)：
<select id="sel01" childId="sel02" childDataPath=" http://localhost/kj/trainplan.do?method=" >
    <option value="">請(qǐng)選擇專業(yè)</option>
        <option value="bj1">專業(yè)1</option>
<option value="bj2">專業(yè)2</option>
</select>  
所屬班級(jí)：
<select id="sel02">
    <option value="0">請(qǐng)先選擇專業(yè)</option>
</select>       
代碼中的childId指定要聯(lián)動(dòng)的下拉框的ID，childDataPath指定二級(jí)下拉框數(shù)據(jù)來(lái)源，與一級(jí)下拉框的value關(guān)聯(lián)來(lái)獲取數(shù)據(jù)。
效果如下：

2010-12-24 16:03 上傳

下載附件 (4.31 KB)

特點(diǎn)8：自定義下拉列表的列數(shù)
當(dāng)下拉框項(xiàng)目過(guò)多時(shí)，可以通過(guò)添加一個(gè)屬性來(lái)指定列數(shù)，并可自定義列寬。效果如下：

2010-12-24 16:03 上傳

下載附件 (26.91 KB)

特點(diǎn)9：完美的瀏覽器兼容性
無(wú)論是IE6、IE7、IE8還是FireFox、Chrome、Safira，甚至在Linux下都保持功能與外觀的一致性。
在http://9899v.com應(yīng)用測(cè)試通過(guò)