如何使用 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>

我想为我的查询使用 selected 值，我的 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 个值。例如我在我的 select 选项中检查了 Market 和 Police Station，并在我的控制台 http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market". 中查看它只得到 Market。

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

顺便说一句，我正在使用 Django。我已经阅读了 this answer，但我不知道如何在上面的 AJAX 代码中使用结果。

Answer 1

<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 添加到您的 select 控件。

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

var selected = [];

初始化如下[根据您提供的答案link]

$('#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
    },
    ...

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

Answer 2

获取 multiselect 选项的值非常简单。

$('#bldg_type').multiselect({
       onChange: function(){
             var selectedOptions = $('#bldg_type').val();
             console.log(selectedOptions);
}})

selectedOptions 应该给你一个 selected 选项的列表。它给出了从 select 标签中的选项 select 编辑的所有值。

您可以在某些地方全局定义 selectedOptions 变量，以便 ajax 调用可以访问它。

祝你好运，希望对你有所帮助

Answer 3

你试过简单的吗

$('#bldg_type').val()

它适用于我的 bootstrap-多选。

Answer 4

HTML

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

Jquery

var selected = $('#multiselect1').val()

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

How to get all selected values using Bootstrap Multiselect and use it in AJAX

jquery

ajax

twitter-bootstrap

bootstrap-multiselect