How do I display multi selected values in a div using jquery?

Question

I want to be able to display the values I get from a multi select to an empty div using jquery. For example, in the code below, how would I implement this using jquery?

<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm" class="selectnumber w-100 multiple searchable='Search here..'">
  <option>23</option>
  <option>17</option>
  <option>14</option>
  <option>11</option>
  <option>9</option>
</select>

<div class="numberselected">
  numbers selected should display here...
</div>

It looks like you are using some library wrapper for multiselect. What lib is it? — Надиль Каримов
– Надиль Каримов, Commented Dec 10, 2019 at 10:16

Devsi Odedra · Accepted Answer · 2019-12-10 10:17:03Z

2

You can do something below

$(document).on('change', '.selectnumber', function(e){

var selected =   $('.selectnumber').val();
$('.numberselected').text(selected);


//console.log(selected);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm"
                        class="selectnumber w-100 multiple searchable='Search here..'">
                        <option>23</option>
                        <option>17</option>
                        <option>14</option>
                        <option>11</option>
                        <option>9</option>
                    </select><!-- End -->
                    <div class="numberselected">
                         //numbers selected should display here. 
                    </div>

answered Dec 10, 2019 at 10:17

Devsi Odedra

5,3421 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Надиль Каримов · Accepted Answer · 2019-12-10 10:33:27Z

1

You don't have option values, so i will show 2 variants.

$('#my-select').change(function(){
  //Get selected options
  let selectedOptions = $(this).children('option:selected');
  
  //Get text of selected options
  let textValues = selectedOptions
    .map(function(){return $(this).text()})
    .toArray();
    
  //Get values of selected options
  let valValues = selectedOptions
    .map(function(){return $(this).val()})
    .toArray();
    
  //Show them in divs
  $('#show-by-text').html(textValues.join(','));
  $('#show-by-value').html(valValues.join(','));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="my-select">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>
<br>
By text:
<div id="show-by-text">
</div>
By value:
<div id="show-by-value">
</div>

answered Dec 10, 2019 at 10:33

Надиль Каримов

3331 silver badge8 bronze badges

1 Comment

Rory McCrossan Over a year ago

Just FYI if there is no value attribute, then the text is used. The value is always set regardless.

Srujal Patel · Accepted Answer · 2020-01-11 10:36:12Z

Please use jQuery I hope the below code will resolve your issue. Let me know if it didn't work.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm" class="selectnumber w-100 multiple searchable='Search here..'" id="multi-select">
    <option value="23">23</option>
    <option value="17">17</option>
    <option value="14">14</option>
    <option value="11">11</option>
    <option value="9">9</option>
  </select><!-- End -->
  <div class="numberselected"> 
   //numbers selected should display 
  </div>

<script>
$(document).ready(function() {
  $("#multi-select")
    .change(function() {
      var str = "";
      $("#multi-select option:selected").each(function() {
        str += $(this).text() + " ";
      });
      $(".numberselected").text(str);
    })
    .change();
});
</script>

Nitheesh · Accepted Answer · 2019-12-10 10:30:02Z

0

Use jQuery change event.

$(document).ready(function(){
  $("#multi").change(function(){
    $("#numberselected").text($("#multi").val())
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm"
    id="multi" class="selectnumber w-100 multiple searchable='Search here..'">
    <option>23</option>
    <option>17</option>
    <option>14</option>
    <option>11</option>
    <option>9</option>
</select>
<div class="numberselected" id="numberselected">
    numbers selected should display here...
</div>

edited Dec 10, 2019 at 10:30

answered Dec 10, 2019 at 10:20

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Comments

Praveen Gopal · Accepted Answer · 2019-12-10 10:32:44Z

0

Use JQ:

   $(document).ready(function(){
    $('#test').on('change', function() {
      console.log( $(this).val() );
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: null -->

        <select id ="test" multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm" class="selectnumber w-100 multiple searchable='Search here..'">
          <option>23</option>
          <option>17</option>
          <option>14</option>
          <option>11</option>
          <option>9</option>
        </select>

answered Dec 10, 2019 at 10:32

Praveen Gopal

5491 gold badge8 silver badges23 bronze badges

Collectives™ on Stack Overflow

How do I display multi selected values in a div using jquery?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related