jquery - 如何用逗号分隔数据值

Question

我创建了一个 select2更改 input 的字段字段的值到选定的选项。
当我选择它时，我可以正确购物，但所选的商品没有用逗号分隔，需要帮助

$(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() 循环遍历每个选定的选项并在数组中返回其文本。
没有其他更改，您的代码

    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">