Chosen：Select 選擇框的華麗變身 -- 值的讀取和初始化

早上從本站看到《Chosen：Select 選擇框的華麗變身》 http://www.oschina.net/news/20528/jquery-chosen-plugin，看完後眼前一亮，正如文中所說「 HTML Form 表單裏的各類組件，例如文本輸入框，textarea，按鈕等，均可以經過CSS或其它技術進行美化，讓它們看起來很漂亮了，惟獨下拉列表選項框(select box),無論你怎麼作，它擺在那裏總顯得格格不入。」

仔細看了介紹頁面
英文： https://github.com/harvesthq/chosen
中文： http://www.aqee.net/docs/Chosen/Chosen.htm

具體如何使用描述比較簡單，就是  對Change事件/Update事件的支持 這段

代碼部分是本身寫的簡單使用方法和說明，拋個磚，但願你們把玉分享出來，一塊兒讓Select好看又好用…


附圖說明：
007圖上部是初始化單選Select後的效果，圖下部是多選後的效果。
008是單選Select選擇時的效果
009 單選後獲取的value: text

標籤：

代碼片斷(5) [全屏查看全部代碼]

1. [代碼][HTML]代碼    

01	<!--單選Select-->

02	<selectdata-placeholder="Choose a Country..."class="chzn-select"style="width:350px;"tabindex="2"id="dl_chose">

03	<optionvalue=""></option>

04	<optionvalue="1">United States</option>

05	<optionvalue="2">United Kingdom</option>

06	<optionvalue="3">Afghanistan</option>

07	<optionvalue="4">Albania</option>

08	<optionvalue="5">Algeria</option>

09	<optionvalue="6">American Samoa</option>

10	<optionvalue="7">Andorra</option>

11	<optionvalue="8">Angola</option>

12	<optionvalue="9">Anguilla</option>

13	<optionvalue="10">zzz</option>

14

</select>

15	<aonclick="chose_set_ini('#dl_chose','10');"href="#">Set zzz to Chose Select</a>

16	<br/><br/>

17

18	<!--多選Select-->

19	<selectdata-placeholder="Choose a Country..."class="chzn-select"multiplestyle="width:350px;"tabindex="4"id="dl_chose2">

20	<optionvalue=""></option>

21	<optionvalue="1">a</option>

22	<optionvalue="2">b</option>

23	<optionvalue="3">c</option>

24	<optionvalue="4">d</option>

25	<optionvalue="5">e</option>

26	<optionvalue="6">f</option>

27	<optionvalue="7">g</option>

28	<optionvalue="8">h</option>

29	<optionvalue="9">i</option>

30

</select>

31	<aonclick="chose_mult_set_ini('#dl_chose2','1,3,5,8');"href="#">Set a,c,e,h to Chose Mult-Select</a>

2. [代碼][Javascript]代碼    

01	<script language="javascript">

02	$(document).ready(function(){

03

04

//華麗初始化

05	$(".chzn-select").chosen();

06

07	//單選select 數據同步

08	chose_get_ini('#dl_chose');

09	//change 事件

10	$('#dl_chose').change(function(){

11	alert(chose_get_value('#dl_chose') +' : '+ chose_get_text('#dl_chose'));

12

});

13

14	//多選select 數據同步

15	chose_get_ini('#dl_chose2');

16	//change 事件

17	$('#dl_chose2').change(function(){

18	alert(chose_get_value('#dl_chose2') +' : '+ chose_get_text('#dl_chose2'));

19

});

20

21

});

22

23	//select 數據同步

24	functionchose_get_ini(select){

25	$(select).chosen().change(function(){$(select).trigger("liszt:updated");});

26

}

27	//單選select 數據初始化

28	functionchose_set_ini(select, value){

29	$(select).attr('value',value);

30	$(select).trigger("liszt:updated");

31

}

32	//單選select value獲取

33	functionchose_get_value(select){

34	return$(select).val();

35

}

36	//select text獲取，多選時請注意

37	functionchose_get_text(select){

38	return$(select+" option:selected").text();

39

}

40

41	//多選select 數據初始化

42	functionchose_mult_set_ini(select, values){

43	vararr = values.split(',');

44	varlength = arr.length;

45	varvalue ='';

46	for(i=0;i<length;i++){

47	value = arr[i];

48	$(select+" [value='"+value+"']").attr('selected','selected');

49

}

50	$(select).trigger("liszt:updated");

51

}

52

</script>

3. [圖片] Selection_007.png    

4. [圖片] Selection_008.png    

5. [圖片] Selection_009.png