Home » jQuery 外掛

[jQ]jQuery doubleSelect Plugin 1.2

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

jquery_doubleselect_plugin_1_2

doubleSelect 從名稱就知道它是讓下拉選單連動的套件,我們只要設定好 JSON 格式的資料就可以使用了。雖然能做到多個下拉選單連動,不過就設定看來是會很繁瑣的!

套件名稱:jQuery doubleSelect Plugin
套件版本:1.2
作者網站:http://www.jgeppert.com/jquery-doubleselect/
套件網址:http://plugins.jquery.com/project/doubleselect
發佈日期:2009-07-23
檔案大小:4.61 KB
檔案下載:jquery.doubleSelect.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
preselectFirst(選填)
描述: 第一個下拉選單預設選擇的項目
預設值: null
 
preselectSecond(選填)
描述: 第二個下拉選單預設選擇的項目
預設值: null
 
emptyOption(選填)
描述: 是否允許空白的選項
預設值: false
 
emptyKey(選填)
描述: 空白選項的預設值
預設值: -1
 
emptyValue(選填)
描述: 空白選項的文字內容
預設值: 'Choose ...'

方法說明:

檢視原始碼 JavaScript
1
2
// 幫指定的下拉選單加上連動的功能
$(selector).doubleSelect(doubleid, values, options);

使用範例:

檢視原始碼 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
57
58
59
60
61
62
63
64
65
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.doubleSelect.js"></script>
<style type="text/css">
	select {
		width: 100px;
		border: 2px solid #666;
		margin: 2px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 設定連動選單的參數
		// 預設先選擇"水果"中的"榴槤"
		// 允許空值選項, 顯示的內容為 "...", 值為 ""
		var options = {
			preselectFirst : 20,
			preselectSecond : 999,
			emptyOption: true,
			emptyValue: "...",
			emptyKey: ""
		};
 
		// 設定連動選單的選項資料
		var selectOptions = {
			"蔬菜": {
				"key" : 10,
				"defaultvalue" : 111,
				"values" : {
					"蕃茄": 110,
					"馬鈴薯": 111,
					"波菜": 112
				}
			},
			"水果": {
				"key" : 20,
				"defaultvalue" : 212,
				"values" : {
					"蘋果": 210,
					"柳丁": 211,
					"奇異果": 212,
					"木瓜": 213,
					"榴槤": 999
				}
			}
		};
 
		// 產生連動選單的功能
		$('#first').doubleSelect('second', selectOptions, options);
	});
</script>
 
<body>
	<div>
		<label for="first">First Select Box :</label>
		<select id="first" name="first" size="1">
			<option value="">--</option>
		</select>
	</div>
	<div>
		<label for="second">Second Select Box :</label>
		<select id="second" name="second" size="1">
			<option value="">--</option>
		</select>
	</div>
</body>
範例 1

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

2 筆針對 [jQ]jQuery doubleSelect Plugin 1.2 的迴響

  1. 請問,

    first 的 select 如果超過2個,是不是就沒作用了?
    例如除了 蔬菜、水果再加 "麵包"...第3、4...個選項
    有沒有辦法將 first 的 select 選項增加到2個以上?
    謝謝!!

    • 目前看來應該是不支援多選啦..
      至於3, 4..以上的連動的話, 應該是可以再多套用幾次 doubleSelect() 就可以了

發表迴響