multi-select 左右选择插件

multi-select 前端左右两端多选插件

1、html 部分：

{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
    <link href="https://cdn.bootcdn.net/ajax/libs/multi-select/0.9.12/css/multi-select.min.css" rel="stylesheet">
    <style>
        .ms-container {
             551px;
        }
    </style>
{% endblock %}
{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal" id="selectUsersForm" action="" method="post">
            {% csrf_token %}
            <div class="box-body">
                <div class="col-xs-6 col-xs-offset-1">
                    <div class="row">
                        <div class="col-sm-6 p-r-lg">
                            <button type="button" class="selectAll btn btn-link pull-left" style="margin-bottom: 10px;">
                                选择全部
                            </button>
                        </div>
                        <div class="col-sm-6 p-r-0">
                            <button type="button" class="deselectAll btn btn-link pull-left">取消全部</button>
                        </div>
                    </div>

                    <select id="optgroup" multiple="multiple">
                        {% for item in line_list %}
                            <option value="{{ item.province }}{{ item.city }}">
                                {{ item.province }}{{ item.city }}({{ item.nums }})
                            </option>
                        {% endfor %}
                    </select>
                </div>

            </div>

            <div class="box-footer" style="display: none;">
                <div class="row span7 text-center ">
                    <button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
                    <button type="button" onclick="btnSave()" class="btn btn-info margin-right ">保存</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

2、js 部分：

{% block javascripts %}
    <script src="https://cdn.bootcdn.net/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
    <script type="text/javascript">
        // 初始化
        $('#optgroup').multiSelect({
            selectableHeader: '<input class="left-search-input se-con form-control" type="text" placeholder="可选线路" >',//搜索框
            selectionHeader: '<input class="col-sm-12 right-search-input se-con form-control" type="text" disabled placeholder="已选线路">', //提示框
            selectableOptgroup: true,
            afterSelect: function (values) {

            },
            afterDeselect: function (values) {

            }
        });

        // 可选全选按钮
        $('button.selectAll').click(function () {
            $('#optgroup').multiSelect('select_all');
            return false;
        });

        // 已选全选按钮
        $('button.deselectAll').click(function () {
            $('#optgroup').multiSelect('deselect_all');
            return false;
        });

        // 搜索框实时查询
        $('input.left-search-input').on('input propertychange', function () {
            var inputValue = $(this).val().trim();
            var selections = $('#optgroup').siblings('.ms-container').find('.ms-selectable li.ms-elem-selectable');
            search(selections, inputValue)
        });

        $('input.right-search-input').on('input propertychange', function () {
            var inputValue = $(this).val().trim();
            var selections = $('#optgroup').siblings('.ms-container').find('.ms-selection li.ms-elem-selection');
            search(selections, inputValue)
        });

        function search(selections, inputValue) {
            $(selections).each(function () {
                var thisValue = $(this).children('span').text();
                if (thisValue.match(inputValue)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }
    </script>

{% endblock %}

参考链接

• 官网：http://loudev.com/
• 另外一款类似插件：基于 bootstrap 的 jQuery 左右移动多选框插件 multiselect.js：https://crlcu.github.io/multiselect/examples/multiple-destinations.html
• Vue-multiselect：https://vue-multiselect.js.org/#sub-getting-started