Chosen 基于jquery的選擇框插件使用方法
更新時(shí)間:2012年05月30日 14:47:06 作者:
Chosen 是一個(gè)JavaScript插件,它能讓丑陋的、很長(zhǎng)的select選擇框變的更好看、更方便。目前,它支持 jQuery 和 Prototype 兩種JavaScript引擎。
Chosen插件下載地址 http://www.dhdzp.com/jiaoben/38027.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
應(yīng)用JS文件
<select class="chzn-select" data-placeholder="Choose a Country" style="width:350px;" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
class設(shè)這為chzn-select
初始化:$(".chzn-select").chosen();
對(duì)select進(jìn)行操作時(shí)候需注意如下:先刪除外部套用的層在經(jīng)常操作,最后在加上$(".chzn-select").chosen();
var selectObj = $("#slectplat");
selectObj.parent().children().remove('div');
selectObj.removeClass();
$("#slectplat").val(_plat);
selectObj.addClass("chzn-select");
selectObj.chosen();
復(fù)制代碼 代碼如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
應(yīng)用JS文件
復(fù)制代碼 代碼如下:
<select class="chzn-select" data-placeholder="Choose a Country" style="width:350px;" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
class設(shè)這為chzn-select
初始化:$(".chzn-select").chosen();
對(duì)select進(jìn)行操作時(shí)候需注意如下:先刪除外部套用的層在經(jīng)常操作,最后在加上$(".chzn-select").chosen();
復(fù)制代碼 代碼如下:
var selectObj = $("#slectplat");
selectObj.parent().children().remove('div');
selectObj.removeClass();
$("#slectplat").val(_plat);
selectObj.addClass("chzn-select");
selectObj.chosen();
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
- 基于JQuery的Select選擇框的華麗變身
- 基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過濾示例
- jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享
- 各種選擇框jQuery的選中方法(實(shí)例講解)
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
- jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
相關(guān)文章
jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法
本篇文章主要是對(duì)jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
基于jquery的時(shí)間段實(shí)現(xiàn)代碼
基于jquery的時(shí)間段實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-08-08
利用jqgrid實(shí)現(xiàn)上移下移單元格功能
這篇文章主要給大家介紹了關(guān)于如何利用jqgrid實(shí)現(xiàn)上移下移單元格功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果,結(jié)合具體實(shí)例形式詳細(xì)分析了FusionCharts插件繪制3D柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)簡(jiǎn)易的天天愛消除小游戲
貌似最近騰訊手機(jī)游戲天天愛消除挺火的,我也是粉絲之一,最近對(duì)javascript一直比較感興趣然后想用js仿造一個(gè),應(yīng)該不是太難,2015-10-10
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法,需要的朋友可以參考一下2013-05-05

