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 {
width: 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