如何使用 Javascript 从多选中获取所有选定的选项文本答案

【问题标题】：How to get all selected option text from multi select Using Javascript如何使用 Javascript 从多选中获取所有选定的选项文本
【发布时间】：2023-01-11 02:54:44
【问题描述】：

我在多选中获取所有选定选项时遇到问题

<select multiple="" title="" class="" id="fm_delivery_or_collection" name="fm_fields[fm_delivery_or_collection][]">
  <option value="90">Delivery or Collection1</option>
  <option value="91">Delivery or Collection2</option>
  <option value="92">Delivery or Collection3</option>
</select>

波纹管是我的代码，它只返回我的第一个选择选项

var select = form.find('select')

for (var i = 0; i < select.length; i++) 
        {
            var s_id = jQuery(select[i]).attr('id');
            var str="",i;

            var e = document.getElementById(s_id);
            var strUser = e.options[e.selectedIndex].text;

            var name = jQuery(select[i]).attr('name')
            var str1 = jQuery(select[i]).attr('id').replace("fm_"," ")
            requestString += "<b>"+str1.replace(/_/g," ")+"</b>" + ':' +strUser+"<br>";
        }

所以请建议我如何获得所有选定的选项文本以及我在哪里出错？

【问题讨论】：

select multiple（或select[select.selectedIndex]）的值是一个数组...
答案过于复杂。您可以使用 .map() 获取所有选定的选项文本。 $("select :selected").map(function (i, element) { return jQuery(element).text(); }).get();

标签： javascript jquery select

【解决方案1】：

你的评论please suggest me how can i get all selected option text, So you can try this:

$("#fm_delivery_or_collection option:selected").each(function () {
   var $this = $(this);
   if ($this.length) {
    var selText = $this.text();
    console.log(selText);
   }
});

【讨论】：

【解决方案2】：

现在一行完成

var text = $('#selector option:selected').toArray().map(item => item.text).join();

它像这样返回：

text1,text2,text3,text4

【讨论】：

漂亮而简单的解决方案。如果您需要不同的输出，join() 接受一个分隔符作为参数。例如 join(' | ')，将输出“text1 | text2 | text3 | text4”。还有一点改进：jQuery 建议使用 $('#selector').find('option:selected')，因为仅通过 ID 搜索依赖于 document.getElementById，速度非常快，而完整选择器则不然。如果#selector 引用一个选择标签，你也可以从选择器中删除不必要的“选项”以提高效率：learn.jquery.com/performance/optimize-selectors

【解决方案3】：

// Return an array of the selected opion values
// select is an HTML select element
function GetSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

将此功能传递给您的选择框，就像..

var selectBox = document.getElementsById('fm_delivery_or_collection');
alert(GetSelectValues(selectBox ));

它将返回选定值的数组

通过使用 Jquery

$('select#fm_delivery_or_collection').val()

从 select 调用的 val 函数将返回一个数组（如果它是倍数）。

【讨论】：

【解决方案4】：

试试这个

$("#fm_delivery_or_collection option").each(function(){
    if($(this).attr('selected') == 'selected')
    {
        var name = $("#fm_delivery_or_collection").attr('name')
        var str1 = $("#fm_delivery_or_collection").attr('id').replace("fm_"," ")
        requestString += "<b>"+str1.replace(/_/g," ")+"</b>" + ':' +strUser+"<br>";
     }
})

【讨论】：

查看您的迭代，您正在迭代选项和options doesn't have id 和name。你能看到吗？
那么你可以在其中添加.parent()，试试看。
哦，是的，你是对的@Jai……谢谢你的建议……我现在已经编辑了

【解决方案5】：

 $("#id :selected").each(function (i,sel) {
   alert($(sel).text());
 });

希望能帮助到你..

【讨论】：

【解决方案6】：

try this link:

$("#selection option:selected").each(function () {
   var $this = $(this);
   if ($this.length) {
    var selText = $this.text();
    console.log(selText);
    $('#selected').append(selText+', ');
  }
});

【讨论】：

【解决方案7】：

只需添加这行代码：-

var reciever= jQuery('#to_select option:selected').toArray().map(item => item.text).join();
/* alert(reciever); */

【讨论】：