CODEWITHSUNDEEP
javascriptjquery
Shah Rukh
Shah Rukh

Reputation: 300

How to get the selected text of options in multiple select?

I am trying to get the selected option in multiple select, I can get the value in the form of an array, but I can't get the text of the option.

$(function() {
  $('#sizeAddCategory').change(function(e) {
    var selected = $(e.target).text();
    console.log("selected " + selected);
    $('#textAreaAddCategory').val(selected.join(','));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
  <label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
  <br/>
  <select required class="form-control" id="sizeAddCategory" multiple>
    
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    
  </select>
</div>

<div class="form-group col-md-3">
  <label for="name">Selected Sizes</label>
  <br/>
  <textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>

On $(e.target).text(), I am getting all the options text, I need the text of only selected options, so I can display it in the textarea.

Upvotes: 0

Views: 1456

Answers (4)

Mohammad amin
Mohammad amin

Reputation: 11

oh my god i right now understand what did you mean ok

write :

$("#selectBox").change(function(e){

    var x = $(e.target).find("option:checked").text();

    console.log(x);
});

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

Using .text() on a select will give the text of the control - i.e. all of the options, not just the selected ones.

To get the selected text (not value as you pointed out you can already get), you can use:

$(this).find("option:checked").map((i,e)=>$(e).text()).toArray();

Here, $(this).find("option:checked") will give you the option elements that have been selected while the .map will return the .text() for each of those values into a jquery array, with .toArray() to convert to a normal js array.

$(function() {
  $('#sizeAddCategory').change(function() {
    var selected = $(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
    console.log("selected", selected);
    $('#textAreaAddCategory').val(selected.join(','));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
  <label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
  <br/>
  <select required class="form-control" id="sizeAddCategory" multiple>
    
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    
  </select>
</div>

<div class="form-group col-md-3">
  <label for="name">Selected Sizes</label>
  <br/>
  <textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>

Upvotes: 1

Mohammad amin
Mohammad amin

Reputation: 11

you write :

 var selected = $(e.target).text();

you should get the value of selectbox and you should write

var selected = $(e.target).val();

Upvotes: 0

Alisson Zampietro
Alisson Zampietro

Reputation: 111

It's because the target that you're defining is in the select tag. Instead of using:

$('#sizeAddCategory').change(function(e) {

use:

$('.option-category').click(function(e) {

and add a class in the options:

<option value="{{$size->id}}" class="option-category">{{$size->name}}</option>

Upvotes: 0

Related Questions