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="width: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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM