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

Posted 2023-05-08

【中文标题】如何使用 Bootstrap Multiselect 获取所有选定的值并在 AJAX 中使用它

【英文标题】：How to get all selected values using Bootstrap Multiselect and use it in AJAX

【发布时间】：2015-06-26 15:24:27

【问题描述】：

我正在使用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 代码的 sn-p：

$.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。我已经阅读了this answer，但我不知道如何在上面的 AJAX 代码中使用结果。

【参考方案1】：

你试过简单吗

$('#bldg_type').val()

它适用于我的引导多选。

【讨论】：

$('#multiselectId').val() 效果很好，我得到所有选定的值，即 ["1","3","8"]

【参考方案2】：

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

【参考方案3】：

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

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

【讨论】：

我试过了，它返回如下内容：http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type%5B%5D=Market&bldg_type%5B%5D=Transport+Terminal% 其中它是一个[]。

是的，这意味着参数列表.. 也检查 this link..

使用这个例子，我发现我必须在事件处理程序中添加一行如下 varbrands = $('#multiselect1 option:selected');选定 = []; $(brands).each(function(index, brand) selected.push([$(this).val()]); );否则所选数组以多个条目结束

我已经在答案中提到了！！ var selected = []; 将在全球范围内声明..

【参考方案4】：

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

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

selectedOptions 应该为您提供所选选项的列表。它给出了从 select 标签中的选项中选择的所有值。

您可以在全局的某个位置定义 selectedOptions 变量，以便 ajax 调用可以访问它。

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