溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題

發(fā)布時間：2020-07-10 13:16:21 來源：網(wǎng)絡(luò) 閱讀：654 作者：873582595 欄目：web開發(fā)

Chosen 是一個支持jquery的select下拉框美化插件，它能讓丑陋的、很長的select選擇框變的更好看、更方便。不僅如此，它更擴展了select，增加了自動篩選的功能。它可對列表進行分組，同時也可禁用某些選擇項。

先來看下插件的效果：

[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題 [置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題

跟這個比起來，原來的select樣式是不是弱爆了！

馬上來武裝我們的select吧：

1、先把js和css文件引用到網(wǎng)頁里面去：

?
1
2
3
<link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.4.min.js"></script>
<script type="text/javascript" src="js/jqueryUI/chosen/chosen.jquery.js"></script>

2、創(chuàng)建一個select元素，如下： 

?
1
2
3
4
5
6
7
<select name="dept" style="width: 150px;" id="dept" class="dept_select"> 
    <option value="部門1">部門1</option>
    <option value="部門2">部門2</option>
    <option value="部門3">部門3</option>
    <option value="部門4">部門4</option>
    <option value="部門5">部門5</option>
</select>

3、然后在js中調(diào)用Chosen定義的方法：

?
1
2
3
$(function(){
    $('.dept_select').chosen();
});

4、搞定收工，屌絲立馬變成高富帥有木有~ 

[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題

 



 

 

　　

 

 

chosen插件的一些設(shè)置項:

1、默認文字選項

你可以在select元素上添加data-placeholder屬性定義默認文字，也就是在沒有選擇選項的情況下，顯示的文字。 

?
1
2
3
4
5
6
7
8
<select data-placeholder="選擇部門" style="width:150px;" class="dept_select">
    <option value="-1"></option>
    <option value="部門1">部門1</option>
    <option value="部門2">部門2</option>
    <option value="部門3">部門3</option>
    <option value="部門4">部門4</option>
    <option value="部門5">部門5</option>
</select>

這里還要注意一點，要想顯示出默認文字，select下的第一個選擇項必須為空的option。

 

2、對其方式
選項文字默認是左對齊的，可以在class屬性中加入“chzn-rtl”來設(shè)置右對齊： 

?
1
<select data-placeholder="選擇部門" class="dept_select chzn-rtl" style="width:150px;">

 

3、JS參數(shù)設(shè)置

在調(diào)用chosen()方法時，我們可以設(shè)置一些參數(shù)： 

選項 描述
no_results_text 無搜索結(jié)果顯示的文本
allow_single_deselect 是否允許取消選擇
max_selected_options 當select為多選時，最多選擇個數(shù)

 

?
1
2
3
4
5
$(".some_select").chosen({
    /*max_selected_options: 2,*/
    no_results_text:"沒有找到",
    allow_single_deselect:true
});

 

4、事件

　　a) change事件：

?
1
2
3
$(".dept-select").chosen().change(function(){
    //do something...
});

　　b) 當我們需要動態(tài)更新select下的選擇項時，該怎么辦呢？只要在更新選擇項后觸發(fā)Chosen中的liszt:updated事件就可以了：　　 

?
1
2
//...$(".dept-select").html('...<option>部門6</option>...');
$(".dept-select").trigger("liszt:updated");

 

其他問題：

1、如果不想要搜索框的話，很簡單，用css把它隱藏掉就OK了：

?
1
2
3
.chzn-container-single .chzn-search {
    display:none;
}

2、做為天朝的程序猿，不得不考慮ie6和ie7下的情況。好吧，用ie6打開一看，select還是一副屌絲樣![置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題　　

　　翻看chosen.jquery.js發(fā)現(xiàn)在chosen方法中有如下一段，ie6和ie7直接返回select對象本身： 

?
1
2
3
if ($.browser.msie && ($.browser.version === "6.0" || ($.browser.version === "7.0" && document.documentMode === 7))) {
    return this;
}

　　把這段js注釋掉，重新打開ie6和7，不再屌絲了有木有！雖然箭頭圖片和搜索圖片不透明不和諧(用js處理下就和諧了)。。。

　　終于能高高興興地在ie6使用了，尼瑪過了會又發(fā)現(xiàn)問題了，還是坑爹的ie6和7！如果2個select在一起又不和諧了，請看：

[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題

　

　　點開選擇部門，尼瑪這是鬧哪樣！見圖： 

　

[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題

[置頂]       [jQueryUI] - Chosen：select下拉選擇框美化插件及問題

　　好吧，這應(yīng)該是z-index的問題，把css修改下，結(jié)果各種div各種z-index改到吐血還是這副死樣子。

　　最后沒辦法了，想了個笨辦法，動態(tài)改變所有chzn-container的z-index，在點擊select的時候讓當前container的z-index最高，讓其他select的chzn-container的z-index變低。在chosen.jquery.js中找到此方法：

?
1
2
3
4
5
6
Chosen.prototype.activate_field = function() {
    this.container.addClass("chzn-container-active");
    this.active_field = true;      
    this.search_field.val(this.search_field.val());
    return this.search_field.focus();
};

　　將此方法改為：

?
1
2
3
4
5
6
7
8
9
Chosen.prototype.activate_field = function() {
    this.container.addClass("chzn-container-active");
    this.active_field = true;      
    this.search_field.val(this.search_field.val());
    var zindex = 1010;
    this.container.css('z-index','1010')
    $('.chzn-container').not(this.container).css('z-index',--zindex);
    return this.search_field.focus();
};

　　當然，你也可以在生成.chzn-container的時候按順序賦予不同的z-index，這樣就可以不用每次點擊select都要重新設(shè)一遍了。

　　至此，ie6和ie7下使用Chosen基本沒什么問題了。。。　　

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手