加入一个select2的选中选项的文本，并设置一个输入框的值答案

【问题标题】：Join the text of the selected options of a select2 and set the value of an input box加入一个select2的选中选项的文本，并设置一个输入框的值
【发布时间】：2022-11-17 00:53:04
【问题描述】：

我有一个输入框和一个 select2 多选元素。

选择新选项后，我希望使用竖线字符合并所选选项的文本并填写输入框。

需要做的一件事是，我的选项可能有尾随 - ，我需要在合并其文本之前对其进行修剪。基本上这很有效，直到我使用 .each() 来获取每个选定选项的文本......有人可以为我解决这个问题吗？ TIA。

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

  $('#elems').on('change', function() {
    var myvalue = $(this).find('option:selected').each(function(this) {
      return $(this).text().replace(/^[-]+/, '') + '|';
    });







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

    //alert($(this).find('option:selected').text().replace(/^[-]+/, ''));
  })
})(jQuery);

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

【问题讨论】：

标签： javascript jquery jquery-select2

【解决方案1】：

当您尝试从每个选定元素转换或检索 text() 时，您的主要问题是使用 each。

在这种情况下，map() 就是您要查找的内容。这实质上是为每个元素调用你的函数（我知道很混乱）并将结果组合成一个新的大批。

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

  $('#elems').on('change', function() {
  //notice map instead of each
    var myvalue = $(this).find('option:selected').map(function(i, opt) {
      return $(opt).text().replace(/^[-]+/, '');
    })
    .get()  //get the actual strings
    .join("|"); //join the strings with a pipe
    $('#total').val(myvalue);
  })
})(jQuery);

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

【讨论】：