从中选择多个选项后触发javascript函数<select>标签

Question

I have a multi select tag is here. I like to call a function after select multiple option from select tag.

<select name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

If any body mark as duplicate please let me know the correct link. I search lots here and google also. but non of solution is good for my problem.

Answer 1

You can listen to change event in the same way as you do this with non-multiple select :

 $("#cars").on('change', function() { var selectedItems = $(this).find("option:selected"); if (selectedItems.length <= 1) { $("#result").text("not multiple!"); return; } var text = ""; $.each(selectedItems, function() { text += $(this).val() + " "; }); $("#result").text(text); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="cars" name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <div id="result"></div>

Answer 2

You can do something like this with help of change() and blur() event handler

 $('select').change(function() { if ($('option:selected', this).length > 1) { // set custom data attribute value as 1 when change event occurred and selected options are greater than 1 $(this).data('select', 1); } else //set value as zero in other case $(this).data('select', 0); }).blur(function() { if ($(this).data('select')) { // when focus out check custom attribute value alert('selected more than one'); // code here // call your function here } $(this).data('select', 0) // set custom attribute value to 0 });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

Answer 3

Use .change instead like so :

$('select').change(function(e){
  var length = $('option:selected', this).length;
  if ( length > 1 ) {
    alert('hey');  
  }
});

DEMO

Answer 4

try this, it will call a function passing the newly selected value into functionToCall .

var values = [];
$('select').change(function(e){

    var current = $(this).find('option:selected').map(function() {
        return $(this).val();
    });

    var newValue = $(current).not(values).get();
    values = current;

    if(newValue.length)
        functionToCall(newValue);
});

function functionToCall(value){
    alert(value);   
    console.log(value);
}

Fiddle