Join the text of the selected options of a select2 and set the value of an input box-CodePudding

I have an input box and a select2 multiselect element.

Upon selection of a new option, I want the selected options' texts to be merged using a pipe character and fill in the input box.

One thing that's needed, is that my options may have a trailing -, which I need to trim before merging its text. Basically this worked well until I used .each() to take the text of every selected option... Can someone fix that for me? 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/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

Your primary issue is using each when you are attempting to convert or retrieve the text() from each selected element.

in this case map() is what you are looking for. this essentially calls your function for each element (I know confusing) and combining the results into a new array.

(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/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>