zoukankan      html  css  js  c++  java
  • jquery chosen 插件多选初始化

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link href="../css/chosen.css" rel="stylesheet" /> <!--引入chosen.css-->
        <script src="../js/jquery-1.10.2.js"></script> <!--引入jquery-*.js-->
        <script src="../js/chosen.jquery.js"></script> <!--引入chosen.jquery.js-->
    </head>
    <body>
        <select data-placeholder="Choose a Country..." class="chzn-select" multiple style="350px;" 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="javascript:;;">Set a,c,e,h to Chose Mult-Select</a>-->
    
    
       
        <script language="javascript">
            // 多选 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 + " option[value='" + value + "']").attr('selected', 'selected');
                }
                $(select).trigger("liszt:updated");
            }
    
            $(document).ready(function () {
                // 如果要初始化已选中的项,需要在调用chosen()函数之前调用chose_mult_set_ini()函数
                // 设置<select>的<option>属性selected='selected',这样chosen()函数被调用时,相应项会显示在框中
                chose_mult_set_ini('#dl_chose2', '1,3,5,8');
    
                //初始化
                $(".chzn-select").chosen();
            });
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    iText + Freemarker实现pdf的导出,支持中文、css以及图片,页眉页脚,页眉添加图片
    SpringBoot使用拦截器、过滤器、监听器
    Java中boolean类型占用多少个字节?我说一个,面试官让我回家等通知
    【搞定面试官】try中有return,finally还会执行吗?
    细说JVM内存模型
    easyExcel简介#
    gbdt和xgboost api
    RNN BPTT
    tensorflow LSTM
    [转]python与numpy基础
  • 原文地址:https://www.cnblogs.com/songxingzheng/p/4057343.html
Copyright © 2011-2022 走看看