CODEWITHSUNDEEP
javascriptjqueryhtmlselect
ossys
ossys

Reputation: 4217

jQuery Multiple Select

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!

Upvotes: 0

Views: 217

Answers (3)

wenhao
wenhao

Reputation: 1

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>

Upvotes: 0

DoXicK
DoXicK

Reputation: 4812

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)

Upvotes: 1

Wilfredo P
Wilfredo P

Reputation: 4076

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

Upvotes: 2

Related Questions