如何用逗号分隔数据值

Question

我创建了一个 select2 字段，它将 input 字段的值更改为 selected 选项。

我 select 时可以正确购物，但 selected 没有用逗号分隔需要帮助

$(function() {
  // turn the element to select2 select style
  $('.select2').select2({
    placeholder: "Select a state",
    maximumSelectionLength: 2,
    tokenSeparators: [',', ' ', ';'],
    allowClear: true,
  }).on('change', function(e) {      
    var data = $(".select2 option:selected").text();
    $("#test").val(data + ',');
    
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<p>
  <select class="select2" style="width:300px" multiple>
    <option value="AL">Alabama</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </select>
</p>

<input type="text" id="test">

查看示例 https://jsfiddle.net/eszv1c47/

Answer 1

为了用逗号分隔值（使用 .join(",") 您需要将选项文本作为数组获取。

一个选项是使用 jquery 的 .map() 循环遍历每个选定的选项和 return 数组中的文本。

没有其他更改，您的代码

    var data = $(".select2 option:selected").text();
    $("#test").val(data + ',');

应该是

    var data = $(".select2 option:selected").map((i,e) => $(e).text().trim()).toArray();
    $("#test").val(data.join(','));

已更新 fiddle（修复了 select2）https://jsfiddle.net/u7zevh3g/

$(function() {
  // turn the element to select2 select style
  $('.select2').select2({
    placeholder: "Select a state",
    maximumSelectionLength: 2,
    tokenSeparators: [',', ' ', ';'],
    allowClear: true,
  }).on('change', function(e) {
    var data = $(".select2 option:selected").map((i,e) => $(e).text()).toArray();
    $("#test").val(data.join(','));
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<p>
    <select  class="select2" style="width:300px" multiple>
        <option value="AL">Alabama</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </select>
</p>

<input type="text" id="test">

如何用逗号分隔数据值

How to separate data val with a comma

jquery

jquery-select2