如何使用Bootstrap Multiselect获取所有选定的值并在AJAX中使用它

Question

我正在使用Bootstrap Multiselect,这是我在HTML中的设置:

<div class="form-group">
    <select class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %}
        <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %}
    </select>
</div>

我想使用我的查询的选定值,我的Ajax代码的片段:

$.ajax({
    url: "cnt_bldg/",
    type: "GET",
    dataType: "JSON",
    data: {
        'brgy_id': brgy_id,
        'bldg_type': $('#bldg_type option:selected').val()
    },
    ...

问题$('#bldg_type option:selected').val()是我只能获得1个值.例如,我检查Market并Police Station在我的选择选项中,并在我的控制台中查看http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market".它只获得Market.

如何获取所有值并将其用于查询？

顺便说一下,我正在使用Django.我已经阅读了这个答案,但我不知道如何在上面的AJAX代码中使用结果.

Answer 1

你试过简单吗？

$('#bldg_type').val()

它适用于我的bootstrap-multiselect.

Answer 2

<div class="form-group">
    <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %}
        <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %}
    </select>
</div>

将 Id 添加multiselect到您的选择控件。

在 JavaScript 中全局声明一个变量，如下所示：

var selected = [];

如下初始化它[来自您提供的答案链接]

$('#multiselect1').multiselect({
    selectAllValue: 'multiselect-all',
    onChange: function(element, checked) {
        var brands = $('#multiselect1 option:selected');
        $(brands).each(function(index, brand){
            selected.push([$(this).val()]);
        });
    }
}); 

通过你的ajax发送它。

$.ajax({
    url: "cnt_bldg/",
    type: "GET",
    dataType: "JSON",
    data: {
        'brgy_id': brgy_id,
        'bldg_type': selected //This will send the values as list of strings
    },
    ...

注意 -在操作接收到的值时，将其作为服务器方法中的字符串列表接受！