Chosen：Select 初始化

[HTML]代码

<!--单选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]代码 

<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>

 

转载于:https://www.cnblogs.com/lampon/p/3424362.html