multiselect選中_multi-select 左右選擇插件

multi-select 前端左右兩端多選插件

1、html 部分：

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

{% load staticfiles %}

{% block css %}

.ms-container {

width: 551px;

}

{% endblock %}

{% block main %}

{% csrf_token %}

選擇全部

取消全部

{% for item in line_list %}

{{ item.province }}{{ item.city }}({{ item.nums }})

{% endfor %}

重置

儲存

{% endblock %}

2、js 部分：

{% block javascripts %}

// 初始化

$('#optgroup').multiSelect({

selectableHeader: '',//搜尋框

selectionHeader: '', //提示框

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();

}

});

}

{% 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