如何从 Bootstrap 多选返回文本值答案

【问题标题】：How to return text values from Bootstrap Multi-Select如何从 Bootstrap 多选返回文本值
【发布时间】：2016-08-29 20:56:26
【问题描述】：

我正在使用引导选择来启用多个下拉菜单。当按下按钮时，我正在构建一个用于 AJAX 请求的变量。

它适用于返回值（在这种情况下基本上是 ID），因为它返回一个值数组，我可以使用循环来构建 JSON。但是我还需要发送文本值，但无法使其正常工作。

   $('#sendButton').click(function() {
    var modal = $('#modalPopup');
    var modalID = modal.data('value');
    var selectedOptionValue = $('#multiSelectBox').val();
    var selectedOptionName = $('#multiSelectBox').text();
    var sendRequest = {
        'modalNo': modalID,
        'products': []
    };
    for (var i = 0; i < selectedOptionValue.length; i++) {
        sendRequest.products.push({
            'productId': selectedOptionValue[i],
            'productName': selectedOptionName
        });
    }
   });

我在构建请求时尝试了另一个循环来执行selectedOptionName[j]，但没有运气，我最终在下拉列表中获得了所有文本值。尝试使用：

var selectedOptionName = $('#multiSelectBox:selected').text();

但这不会返回任何东西。有什么想法吗？

下拉列表的 HTML：

<select class="selectpicker" multiple id="multiSelectBox" title="Select Product(s)"></select>

填充下拉列表的代码：

var html = '';
for (var i = 0; i < data.products.length; i++){
        html += '<option value ="' + data.products[i].productId+ '">' + data.products[i].productName+ '</option>'
    }
    $('#multiSelectBox').html(html);    
    $('.selectpicker').selectpicker('refresh');

【问题讨论】：

能否提供相关的HTML代码？
添加了 HTML/代码以填充下拉菜单
你想要的是this fiddle吗？
谢谢，但不完全是，我使用的是多选文本框，所以它会获取所有选定的选项文本，我可以将它们与他们的 ID 配对。如果它将它们全部返回到一个数组中，其值会很棒。
好吧，我没有仔细阅读问题，抱歉。

标签： jquery twitter-bootstrap bootstrap-select

【解决方案1】：

正确的语法是

$("#multiSelectBox option:selected").text()

但这会给你一个包含所有选定文本的字符串。所以你需要在你的循环中按值查找文本。我这里没有检查语法，可能有错别字。

for (var i = 0; i < selectedOptionValue.length; i++) {

var val = selectedOptionValue[i]; 
var txt = $("#multiSelectBox option[value='"+val+"']").text();

        sendRequest.products.push({
            'productId': val ,
            'productName': txt 
        });
    }

【讨论】：

那太好了，已排序，我试图用第一个选项来完成这一切：选定的位，而不是去寻找相关的文本。谢谢！

【解决方案2】：

用过滤器全选

<h1 class="monthofyear">monthofyear: <span></span></h1>



  $(document).ready(function() { $('#monthofyear').multiselect({ includeSelectAllOption: true,
  onSelectAll: function(element, checked) {
    var selected = [];
    $('#monthofyear option:selected').each(function(index, brand) {
      selected.push([$(this).val()]);
    });
    $("h1.monthofyear span").text(selected);
  },
  enableCaseInsensitiveFiltering: true,
  enableFiltering: true,
  maxHeight: '300',
  buttonWidth: '235',
  onChange: function(element, checked) {
    var brands = $('#monthofyear option:selected');
    var selected = [];
    $(brands).each(function(index, brand) {
      selected.push([$(this).val()]);
    });
    $("h1.monthofyear span").text(selected);

  }
});});

【讨论】：