jQuery Chosen：如何从多项选择中获取所选选项文本的数组

Posted 2023-05-09

【中文标题】jQuery Chosen：如何从多项选择中获取所选选项文本的数组

【英文标题】：jQuery Chosen : How to get array of selected options text from a multiple select

【发布时间】：2021-12-09 03:47:42

【问题描述】：

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

我可以很容易地得到一个数组中的所有值：

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

根据选择的选项，它会返回一个 values 数组，如下所示：

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

获取文本而不是值的等价物是什么？

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

提前感谢您的帮助！

【问题讨论】：

$("#select_custom option[value='cty01']").text() 为所有值创建循环。

【参考方案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 数组。

【讨论】：

我在第一次选择时收到此错误：未捕获错误：语法错误，无法识别的表达式：[option value="cty03"]

通过这个更正它正在工作： var label = select_custom.find('option[value="'+values[i]+'"]').text();

@Dali 抱歉，没有注意到错字。已更新我的答案。很高兴你知道出了什么问题！

【参考方案2】：

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>

【讨论】：

你好，我需要一个文本数组，而不是值

@Dali 因为你可以看到你有文本而不是值的代码，所以要清楚你想在更改选择时推送所有文本选项或者你想推送选项的文本哪个被选中？

哦，抱歉，我现在可以看到了。我会试试这个。 （我只想推送选择的选项的文本）

@Dali 好的，那我马上修改我的代码

@Dali 代码完成了。

【参考方案3】：

你可以使用地图功能

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>

【讨论】：

我认为 'option:selected' 不适用于 Chosen。

你试过了吗？ @大理

是的，它给了我这样的字符串：MadridMontrealParisBerlin

您可以在这里尝试选择多项选择：harvesthq.github.io/chosen 如果您检查，您将看到没有选择。

但是我现在看到有一个'class="result-selected'，也许我可以使用它...