bootstrap dual listbox

字数 0阅读 1271
效果图
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-duallistbox/bootstrap-duallistbox.css">
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
  
    <script src="bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
    <title>列表</title>
</head>

<body>
    <div class="col-md-7">
        <form id="test">
            <select multiple="multiple" name="list" id="list">
                <option value="1">1</option>
                <option selected value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option selected value="5">5</option>
                <option value="6">6</option>
                <option selected value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option selected value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option selected value="15">15</option>
                <option value="16">16</option>
                <option selected value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
            </select>

            <button id="button" type="button" class="btn btn-large btn-block btn-default">提交</button>

        </form>
    </div>

    <script>
        // 设置
        $('#list').bootstrapDualListbox({
            nonSelectedListLabel: '已有角色',
            selectedListLabel: '未有角色',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false, //出现一个剪头,表示可以一次选择一个
            //nonSelectedFilter: '1', //nonSelectedFilter的过滤器
            //selectedFilter: '2', //nonSelectedFilter的过滤器
            // bootstrap2Compatible: true,
            filterTextClear: '展示所有',
            moveSelectedLabel: "添加",
            moveAllLabel: '添加所有',
            removeSelectedLabel: "移除",
            removeAllLabel: '移除所有',
            infoText: '共{0}个',
            showFilterInputs: false,
        })

        //方法
        $('#button').click(function() {
            console.log($('[name="list"]').val()) //打印所选中的值
            $('#list').bootstrapDualListbox('destroy') //destroy整个列表
            $('#list').bootstrapDualListbox('refresh', true) //destroy整个列表
        })
    </script>
</body>

</html>

推荐阅读更多精彩内容