Home » jQuery 外掛

[jQ]Chosen 0.9.8

範例 1
沒錯!只要 900 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



Chosen 可以把基本的下拉選單轉換成類似 Facebook 的下拉選單的外掛套件。除了再選取時可以利用搜尋的功能之外,多選時能在每個已選擇的選項旁加上 x 鈕,讓使用者可以快速的移除。

下拉選單的提示來源是 data-placeholder 屬性,若沒提供的話,則單選預設是 "Select an Option",而多選則是 "Select Some Options"。另外,因為 Chosen 會把第一個選項當成預設,所以請務必把第一個選項設成空白的值

套件名稱:Chosen
套件版本:0.9.8
作者網站:http://harvesthq.github.com/chosen/
套件網址:N/A
發佈日期:2012-03-12
檔案大小:33.6 KB
檔案下載:chosen.jquery.js chosen.css

參數選項說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
allow_single_deselect(選填)
描述: 是否允許單選時能直接刪除選擇
預設值: false
 
disable_search_threshold(選填)
描述: 如果選項少於此值時就顯示搜尋輸入框
預設值: 0
 
search_contains選填)
描述: 搜尋條件是否使用模糊查詢
預設值: false
 
no_results_text(選填)
描述: 當搜尋不到任何結果時顯示的訊息內容
預設值: "No results match"

方法說明:

檢視原始碼 JavaScript
1
2
3
4
5
// 把指定的下拉選單轉換成 chosen 效果
$(selector).chosen(options);
 
// 更新選單
$(selector).trigger("liszt:updated")

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<link type="text/css" rel="stylesheet" href="chosen.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="chosen.jquery.js"></script>
<script type="text/javascript">
	$(function(){
		// 轉換成 chosen 效果
		$(".chzn-select").chosen();
 
		// 轉換成 chosen 效果並允許單選時能直接刪除選擇
		$(".chzn-select-deselect").chosen({
			allow_single_deselect: true
		});
	});
</script>
 
<body>
	<h3>單選</h3>
	<select data-placeholder="選擇你喜歡的課程" class="chzn-select" style="width:200px;">
		<option value=""></option>
		<option>國文</option>
		<option>英文</option>
		<option>統計</option>
		<option>微積分</option>
		<option selected>體育</option>
		<option>會計</option>
		<option>經濟</option>
		<option>園遊會</option>
	</select>
 
	<h3>多選</h3>
	<select data-placeholder="選擇你喜歡的課程" class="chzn-select" multiple style="width:350px;">
		<option value=""></option>
		<option>國文</option>
		<option>英文</option>
		<option>統計</option>
		<option>微積分</option>
		<option selected>體育</option>
		<option>會計</option>
		<option>經濟</option>
		<option>園遊會</option>
	</select>
 
	<h3>讓單選也能直接刪除</h3>
	<select data-placeholder="選擇你喜歡的課程" class="chzn-select-deselect" style="width:200px;">
		<option value=""></option>
		<option>國文</option>
		<option>英文</option>
		<option>統計</option>
		<option>微積分</option>
		<option selected>體育</option>
		<option>會計</option>
		<option>經濟</option>
		<option>園遊會</option>
	</select>
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

圖片檔案:

9 筆針對 [jQ]Chosen 0.9.8 的迴響

  1. 請問老師,在搜尋關鍵字那裡,是否可以改為像是like 的方式,只要有就出來而不是只比對第一個字。

    是修改
    AbstractChosen.prototype.set_default_values = function()
    是修改這裡就行了嗎?

  2. 請問老師 如果我把這個跟資料庫做連結 那我把資料從資料庫抓出來 該如何讓他以這種方式出現?
    就是..如果我選擇 國文 又選擇英文 寫進資料庫變成 1,2 那抓出來 該怎麼讓它選定已經選的項目?

  3. 請問送出的值可以跟選擇時的順序一樣嗎?例如
    國文
    英文
    統計
    微積分

    我先選了英文、國文、統計、微積分這樣的順序,但它送出值的順序卻還是國文、英文、統計、微積分,另外可以在值與值中間加入","嗎?
    找了好久不知道在哪邊改,謝謝。

發表迴響