0

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!

0

3 Answers 3

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

2
  • Thank you!! I was using $(this).value() instead of $(this).val()... doh!
    – ossys
    Dec 12, 2013 at 0:57
  • 1
    You could also use this.value and this.text. Shorter and faster that way. Dec 12, 2013 at 1:00
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)

1
  • 1
    Use e.target instead of event.originalEvent.srcElement. The .srcElement is a non-standard IE construct. Dec 12, 2013 at 0:59
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.