优秀的编程知识分享平台

网站首页 > 技术文章 正文

bootstrap todoList实现(bootstrap 列表)

nanyue 2024-09-06 20:15:02 技术文章 9 ℃
<div class="form-group col-md-6">
    <div class="form-group">
        <label for="func" class="control-label">权限节点:</label>
        <div class="row">
            <div class="col-md-5">
                <select multiple class="form-control" id="all-func" style="height: 230px">
                    <option value="1">列表</option>
                    <option value="5">添加</option>
                    <option value="10">修改</option>
                    <option value="15">删除</option>
                    <option value="20">详情</option>
                    <option value="25">状态</option>
                    <option value="30">批量删除</option>
                    <option value="35">添加子级</option>
                    <option value="40">全部展开</option>
                    <option value="45">全部折叠</option>
                    <option value="50">导出数据</option>
                    <option value="55">导入数据</option>
                    <option value="60">分配权限</option>
                    <option value="65">重置密码</option>
                </select>
            </div>
            <div class="col-md-2">
                <div class="text-center">
                    <button type="button" class="btn btn-default" id="add-func"><i
                            class="mdi mdi-arrow-right-thick"></i></button>
                    <button type="button" class="btn btn-default" id="remove-func"><i
                            class="mdi mdi-arrow-left-thick"></i></button>
                </div>
            </div>
            <div class="col-md-5">
                <select multiple class="form-control" id="assigned-func" style="height: 230px"></select>
            </div>
        </div>
    </div>
</div>


$(function () {
    add_func();
    remove_func();
})

//向右添加
function add_func() {
    $('#add-func').click(function () {
        $('#all-func option:selected').each(function () {
            $('#assigned-func').append((this));
        });
    });
}

//移除
function remove_func() {
    $('#remove-func').click(function () {
        $('#assigned-func option:selected').each(function () {
            $('#all-func').append((this));
        });
    });
}

最近发表
标签列表