• Chosen:Select 初始化


    [HTML]代码

    <!--单选Select-->
    <select data-placeholder="Choose a Country..." class="chzn-select" style="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="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>
  • 相关阅读:
    结队-贪吃蛇游戏-项目进度
    团队-象棋游戏-开发环境搭建过程
    团队-中国象棋游戏-设计文档
    结对-贪吃蛇游戏-开发环境搭建过程
    结对-结对编项目贪吃蛇-设计文档
    课后作业-阅读任务-阅读提问-1
    《20170911-构建之法:现代软件工程-阅读笔记》
    团队-中国象棋-成员简介及分工
    团队-团队编程项目中国象棋-需求分析
    结队-结队编程项目贪吃蛇--需求分析
  • 原文地址:https://www.cnblogs.com/lampon/p/3424362.html
Copyright © 2020-2023  润新知