jstree-demo

一、组件初始化以及默认选中指定节点回调

<select id='pre-selected-options' multiple='multiple'>
    <option value='elem_1' selected>elem 1</option>
    <option value='elem_2'>elem 2</option>
    <option value='elem_3'>elem 3</option>
    <option value='elem_4'>elem 4</option>
    <option value='elem_5'>elem 5</option>
    <option value='elem_6'>elem 6</option>
    <option value='elem_7'>elem 7</option>
    <option value='elem_8'>elem 8</option>
    <option value='elem_9'>elem 9</option>
    <option value='elem_10'>elem 10</option>
</select>

<script src="../js/jquery-2.1.1.js"></script
<script src="../js/plugins/lou-multi-select/js/jquery.multi-select.js"></script>

$(function () {
    $('#pre-selected-options').multiSelect().multiSelect('select', ['elem_2','elem_3']);//赋值;
})

<link rel="stylesheet" type="text/css" href="../js/plugins/lou-multi-select/css/multi-select.css">

二、搜索,全选,动态加载数据

<select id='search-select' multiple='multiple'>
    <option value='elem_1' selected>elem 1</option>
    <option value='elem_2'>elem 2</option>
    <option value='elem_3'>elem 3</option>
    <option value='elem_4'>elem 4</option>
    <option value='elem_5'>elem 5</option>
    <option value='elem_6'>elem 6</option>
    <option value='elem_7'>elem 7</option>
    <option value='elem_8'>elem 8</option>
    <option value='elem_9'>elem 9</option>
    <option value='elem_10'>elem 10</option>
</select>

<script src="../js/jquery-2.1.1.js"></script
<script src="../js/plugins/lou-multi-select/js/jquery.multi-select.js"></script>

$(function () {
        $('#ajax-select').multiSelect()
        var arrList = [
            {"value":111,"text":"一百一十一"},
            {"value":222,"text":"二百二十二"},
            {"value":333,"text":"三百三十三"},
            {"value":444,"text":"四百四十四"}
        ];
        $.each(arrList,function (i,n) {
            $('#ajax-select').multiSelect('addOption', {
                value: n.value,
                text: n.text,
                index: 3,//从第几个插入
                nested: false
            });
        });
})

<link rel="stylesheet" type="text/css" href="../js/plugins/lou-multi-select/css/multi-select.css">

穿梭框组件