Display multiple selections that are selected on change

user_2141345 0
Viewed 44

I am having trouble displaying the multiple selections that are chosen in the select box using JS/Jquery. I would like each value to display separated by a comma.

var selectionsInfo;
function setInfo(){
  selectionsInfo = $("option:selected", "#custom-report").val();
document.getElementById("testInfo").innerHTML = selectionsInfo;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="custom-report" name="creport" onchange="setInfo()" multiple="">
      <option value=""></option>
      <option value="10137">bubbles</option>
      <option value="10131">fruit</option>
      <option value="10132">koalas</option>
      <option value="10139">pandas</option>
</select>

<div id="testInfo"></div>

jquery javascript
3 Answers

value is a plain JS method, not a jQuery one. You need to call val() when working with jQuery objects.

In addition, note inline event handlers added using onclick should be avoided. You can attach events unobtrusively using jQuery using on(). Also note that jQuery 1.12.4 is very outdated. You should upgrade to 3.x.

With all that said, try this:

jQuery($ => {
  $('#custom-report').on('change', e => {
    let values = $(e.target).val();
    $('#testInfo').text(values);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="custom-report" name="creport" multiple="">
  <option value=""></option>
  <option value="10137">bubbles</option>
  <option value="10131">fruit</option>
  <option value="10132">koalas</option>
  <option value="10139">pandas</option>
</select>

<div id="testInfo"></div>

user_5194130

I created a jQuery plugin called $.fn.selectText that can extract and return an array of selected option text from a $('<select>') element.

See the assignment of textArr below:

/* #IFNDEF */

/*
 * @filename    select-text.jquery.js
 * @description Include this after jQuery
 * @author      Mr. Polywhirl
 */
(function($) {
  $.fn.selectText = function() {
    return this.find('option:selected').map(function() {
      return $(this).text();
    }).toArray();
  };
})(jQuery);

/* #ENDIF */

function setInfo(select) {
  const
    valueArr = $(select).val() || [],
    textArr = $(select).selectText();

  $("#testInfo").html(valueArr.join(', ') + '<br>' + textArr.join(', '));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="custom-report" name="creport" onchange="setInfo(this)" multiple="">
  <option value=""></option>
  <option value="10137">bubbles</option>
  <option value="10131">fruit</option>
  <option value="10132">koalas</option>
  <option value="10139">pandas</option>
</select>

<div id="testInfo"></div>

user_17622240

You can use .val(). Here is a working demo with some modifications:

$("#custom-report").on("change", function() {
  $("#testInfo").html( $(this).val().join(", ") );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<select id="custom-report" name="creport" multiple="">
      <option value=""></option>
      <option value="10137">bubbles</option>
      <option value="10131">fruit</option>
      <option value="10132">koalas</option>
      <option value="10139">pandas</option>
</select>

<div id="testInfo"></div>

user_74863130
Related