jQuery 选择：如何从多个 select 中获取 selected 选项文本数组

Question

我正在使用 jQuery Chosen，我需要将每个选项 text 放入多个 select 下拉列表的数组中。

我可以轻松地获取数组中的所有值：

    <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple>
      <option value="cty01">New York</option>
      <option value="cty02">Madrid</option>
      <option value="cty03">Montreal</option>
      <option value="cty04">Paris</option>
      <option value="cty05">Berlin</option>
    </select>

   var select_custom = jQuery("#select_custom");

   select_custom.change(function(){
    var values = select_custom.chosen().val();
   });

并且根据 selected 的选项，它将 return 一个值的数组，如下所示：

    ['cty01', 'cty03', 'cty04']

获取文本而不是值的等效项是什么？

    ['New York', 'Montreal', 'Paris']

在此先感谢您的帮助！

Answer 1

var select_custom = jQuery("#select_custom");

select_custom.change(function(){
  var values = select_custom.chosen().val();

  var labels = [];

  for (var i = 0; i < values.length; i++) {
    var label = select_custom.find('option[value="'+values[i]+'"]').text();
    labels.push(label);
  }

  console.log(labels);

});

我们基本上是遍历每个值，在 <select> 字段中搜索与该值匹配的 <option> 标签，然后将其推送到 labels 数组。

Answer 2

可以使用地图功能

https://api.jquery.com/jquery.map/

$("#select_custom").change(function() {
  var text = $(this).find('option:selected').toArray().map(item => item.text).join();
  console.clear();
  console.log(text);
  $("#result").text(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple>
      <option value="cty01">New York</option>
      <option value="cty02">Madrid</option>
      <option value="cty03">Montreal</option>
      <option value="cty04">Paris</option>
      <option value="cty05">Berlin</option>
    </select>
    
<div id="result"></div>

Answer 3

var select_custom = jQuery("#select_custom");
var arr = [];

select_custom.change(function(){
  var text = $('#select_custom option:selected').text();
  if(!arr.includes(text)) {
    arr.push(text);
  }
  console.log(arr);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple>
    <option value="cty01">New York</option>
    <option value="cty02">Madrid</option>
    <option value="cty03">Montreal</option>
    <option value="cty04">Paris</option>
    <option value="cty05">Berlin</option>
</select>

jQuery 选择：如何从多个 select 中获取 selected 选项文本数组

jQuery Chosen : How to get array of selected options text from a multiple select

javascript

arrays

jquery

jquery-chosen