Chosen：Select 选择框的华丽变身 -- 值的读取和初始化

原文：http://www.oschina.net/code/snippet_167099_5712

<!--单选Select-->

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

     < option value = "" ></ option >

     < option value = "1" >United States</ option >

     < option value = "2" >United Kingdom</ option >

     < option value = "3" >Afghanistan</ option >

     < option value = "4" >Albania</ option >

     < option value = "5" >Algeria</ option >

     < option value = "6" >American Samoa</ option >

     < option value = "7" >Andorra</ option >

     < option value = "8" >Angola</ option >

     < option value = "9" >Anguilla</ option >

     < option value = "10" >zzz</ option >

</ select >

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

< br />< br />

 

<!--多选Select-->

< select data-placeholder = "Choose a Country..." class = "chzn-select" multiple style = "width:350px;" tabindex = "4" id = "dl_chose2" >

     < option value = "" ></ option >

     < option value = "1" >a</ option >

     < option value = "2" >b</ option >

     < option value = "3" >c</ option >

     < option value = "4" >d</ option >

     < option value = "5" >e</ option >

     < option value = "6" >f</ option >

     < option value = "7" >g</ option >

     < option value = "8" >h</ option >

     < option value = "9" >i</ option >

</ select >

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

[代码] [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 <script language= "javascript" >      $(document).ready( function (){                    //华丽初始化          $( ".chzn-select" ).chosen();            //单选select 数据同步          chose_get_ini( '#dl_chose' );          //change 事件          $( '#dl_chose' ).change( function (){                  alert(chose_get_value( '#dl_chose' ) + ' : ' + chose_get_text( '#dl_chose' ));          });            //多选select 数据同步          chose_get_ini( '#dl_chose2' );          //change 事件          $( '#dl_chose2' ).change( function (){              alert(chose_get_value( '#dl_chose2' ) + ' : ' + chose_get_text( '#dl_chose2' ));          });                });            //select 数据同步      function chose_get_ini(select){          $(select).chosen().change( function (){$(select).trigger( "liszt:updated" );});      }      //单选select 数据初始化      function chose_set_ini(select, value){          $(select).attr( 'value' ,value);          $(select).trigger( "liszt:updated" );      }      //单选select value获取      function chose_get_value(select){          return $(select).val();      }      //select text获取，多选时请注意      function chose_get_text(select){          return $(select+ " option:selected" ).text();      }        //多选select 数据初始化      function chose_mult_set_ini(select, values){          var arr = values.split( ',' );          var length = arr.length;          var value = '' ;          for (i=0;i<length;i++){              value = arr[i];              $(select+ " [value='" +value+ "']" ).attr( 'selected' , 'selected' );          }          $(select).trigger( "liszt:updated" );      } </script>