Question

我有一个多选标签在这里。我喜欢在select tag中选择多个选项后调用一个函数。＆lt; select name =“cars”multiple＆gt; ＆lt; option value =“volvo”＆gt; Volvo＆lt; / option＆gt; ＆lt; option value =“saab”＆gt; Saab＆lt; / option＆gt; ＆lt; option value =“opel”＆gt; Opel＆lt; / option＆gt; ＆lt; option value =“audi”＆gt; Audi＆lt; / option＆gt; ＆LT; /选择＆GT; 如果任何身体标记为重复，请让我知道正确的链接。我在这里搜索很多，谷歌也。但没有解决方案对我的问题有好处。

Answer 1

您可以使用与非多重change相同的方式收听select事件：

＆＃13;

$("#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);
});

＆＃13;

<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>

＆＃13;

Answer 2

您可以借助change()和blur()事件处理程序

来执行此类操作

＆＃13;

$('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
});

＆＃13;

<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>

＆＃13;

Answer 3

使用.change代替：

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

DEMO

Answer 4

试试这个，它会调用一个函数将新选择的值传递给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

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

4 个答案: