Home » jQuery 外掛

[jQ]Chosen 0.9.8

[ 日期： | 瀏覽：16,226 | 迴響：9 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 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 的迴響

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

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

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

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

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

發表迴響