jQuery Multiple Select

Question

I have a multiple select HTML element.

<select multiple="multiple" id="mult_sel">
   <option value="1">Dog</option>
   <option value="2">Cat</option>
</select>

I'm using the following jQuery to capture when a single option in this multiple select is clicked on with the following:

$('#mult_sel').click(function(v){
   console.log(v);
});

This event triggers as expected, however, I'm not sure how to get the value and text values of the single option that was clicked for a multiple select field.

Thanks!

Wilfredo P · Accepted Answer · 2013-12-12 00:55:29Z

2

try

$('#mult_sel option').click(function(){
   alert('the value ' $(this).val()); //for get the value
   alert('the text'  $(this).text()); //for get the text
});

The .val() return the value of the option, and the .text() return the text of the option selected.

Jsfiddle

answered Dec 12, 2013 at 0:55

Wilfredo P

4,07430 silver badges46 bronze badges

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

2 Comments

ossys Over a year ago

Thank you!! I was using $(this).value() instead of $(this).val()... doh!

user2736012 Over a year ago

You could also use this.value and this.text. Shorter and faster that way.

DoXicK · Accepted Answer · 2013-12-12 13:34:53Z

1

jsfiddle

$('#mult_sel').click(function(event){
    // event.originalEvent.srcElement isn't fully supported
    console.log(e.target);
});

there ya go :-) (do check if it's an [option] or a [select] element)

edited Dec 12, 2013 at 13:34

answered Dec 12, 2013 at 0:54

DoXicK

4,80226 silver badges22 bronze badges

1 Comment

user2736012 Over a year ago

Use e.target instead of event.originalEvent.srcElement. The .srcElement is a non-standard IE construct.

Artjom B. · Accepted Answer · 2015-03-09 22:07:09Z

0

Try to use Select2 JQuery

you must download the code from GitHub and copy the dist directory to your project.

Include the following lines of code in the <head> section of your HTML.

<link href="../css/select2.min.css" rel="stylesheet" />
<script src="../js/select2.min.js"></script>

Initialize Select2 on the <select> element that you want to make it multiple select boxes.

<script type="text/javascript">
  $('#select2-multiple').select2();
</script>

Example Code (Remember to declared with the multiple attribute)

<select class="select2-multiple" multiple="multiple">
  <option value="WWL">Wong Wai Ling</option>
  <option value="AE">Alessia Enzler</option>
  <option value="ASL">A-Young SON LAuren</option>
</select>

edited Mar 9, 2015 at 22:07

Artjom B.

62k26 gold badges137 silver badges236 bronze badges

answered Mar 9, 2015 at 21:44

wenhao

1

Collectives™ on Stack Overflow

jQuery Multiple Select

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related