I need to get data for all selected options in select tag and for that I used onclick() function which gives the data of only clicked options. But if user selects all options with CTRL*A then no data will be received. I have tried to use select() which is not working in this case.

//jQuery onclick()
$('select[name=sensors]').on('click', function(){
    $('#demo').text($('select[name=sensors]').val());
});

//jQuery select()
$('select[name=sensors]').select(function(){
    $('#demo2').text($('select[name=sensors]').val());
});

<script src=".1.1/jquery.min.js"></script>
<select type='list' name='sensors' multiple>
  <option value= "e11">e11</option>
  <option value= "e12">e12</option>
  <option value= "e13">e13</option>
  <option value= "e14">e14</option>
</select>
<!--jQuery onclick()-->
<div id="demo"></div>
<!--jQuery select()-->
<div id="demo2"></div>

I need to get data for all selected options in select tag and for that I used onclick() function which gives the data of only clicked options. But if user selects all options with CTRL*A then no data will be received. I have tried to use select() which is not working in this case.

//jQuery onclick()
$('select[name=sensors]').on('click', function(){
    $('#demo').text($('select[name=sensors]').val());
});

//jQuery select()
$('select[name=sensors]').select(function(){
    $('#demo2').text($('select[name=sensors]').val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type='list' name='sensors' multiple>
  <option value= "e11">e11</option>
  <option value= "e12">e12</option>
  <option value= "e13">e13</option>
  <option value= "e14">e14</option>
</select>
<!--jQuery onclick()-->
<div id="demo"></div>
<!--jQuery select()-->
<div id="demo2"></div>

• javascript
• jquery

Share Improve this question Follow asked Jul 22, 2015 at 13:16 RegarBoyRegarBoy 3,52111 gold badge2525 silver badges4747 bronze badges 4

• 1 The select event is triggered when the user selects (highlights) text in applicable control elements, not when an option is selected. – George Commented Jul 22, 2015 at 13:19
• 1 select scope is limited to input & text-area only..It wont work on div – Jayababu Commented Jul 22, 2015 at 13:21
• Jayababu api.jquery./select Here it is used on div – RegarBoy Commented Jul 22, 2015 at 13:23
• It is unfortunate that they used select for inputs other than a select... Which just leads to confusion :) – iCollect.it Ltd Commented Jul 22, 2015 at 13:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Don't bind on click, but on change. This way even the changes ing from other kinds of interaction will be taken into account:

$('select[name=sensors]').on('change', function(){
    $('#demo').text($('select[name=sensors]').val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type='list' name='sensors' multiple>
  <option value= "e11">e11</option>
  <option value= "e12">e12</option>
  <option value= "e13">e13</option>
  <option value= "e14">e14</option>
</select>
<div id="demo"></div>

As for your experimentation with select, here's what the documentation says:

The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes.

It's simply not relevant here, as the user isn't selecting text but options.

Do like this

$('select[name=sensors]').change(function(){
    $('#demo2').text($(this).val());
});