修复Select2多选选中项文本去前缀-后用|拼接填充输入框问题

你的问题出在each()方法的使用上：each()返回的是调用它的jQuery对象（也就是选中的option集合），而不是你在回调里return的字符串，所以直接把它赋值给myvalue，输入框肯定得不到想要的结果。

改用map()方法来处理：这个方法会遍历集合，把每个元素经过回调处理后的结果收集成新的jQuery对象，再用get()转成原生数组，最后用join('|')拼接成你要的格式。

修复后的JS代码：

(function($) {
  $(document).ready(function() {
    $('#elems').select2();
  });

  $('#elems').on('change', function() {
    // 用map收集处理后的文本，转数组后拼接
    var myvalue = $(this).find('option:selected').map(function() {
      // 去掉开头所有短横线
      return $(this).text().replace(/^[-]+/, '');
    }).get().join('|');

    $('#total').val(myvalue);
  })
})(jQuery);

关键说明： #

• map()：遍历每个选中的option，回调里返回处理后的文本（去掉开头短横线）
• get()：把jQuery对象转换成原生字符串数组，比如["One", "Two"]
• join('|')：把数组元素用竖线拼接成"One|Two"这样的字符串

完整可运行代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<div>
  <input type="text" id="total">
</div>
<div>
  <select id="elems" name="elems[]" multiple>
    <option value="one">-One</option>
    <option value="two">--Two</option>
    <option value="three">---Three</option>
    <option value="four">----Four</option>
    <option value="five">-----Five</option>
    <option value="six">------Six</option>
    <option value="seven">-------Seven</option>
    <option value="eight">--------Eight</option>
  </select>
</div>

内容的提问来源于stack exchange，提问作者Faye D.