Question

假设我有一个多选列表，如：

<select name="persons" id="persons" multiple size="8">
   <option id="captureMe">Test option</option>
   <option value="" disabled="disabled">─────────</option>
   <option value="FR">Franck</option>
   <option value="GE">Georges</option>
   <option value="DA">David</option>
   <option value="LU">Luc</option>
   <option value="DO">Donald</option>
   <option value="FR">FRANCOIS</option>
</select>

我可以在$("#captureMe")绑定哪些事件？

我尝试了一些像

这样的脚本

$("#captureMe").change(function() {alert("got it!");});
$("#captureMe").on("change", function() {alert("got it!");});
$("#persons").on("change", "#captureMe", function() {alert("got it!");});

但这些都不起作用，也不适用于点击事件。

所以我的问题是，我可以将哪个事件绑定到选择倍数中的选项？

我不会从选择中触发该事件，而是单独从该选项中触发

（目标可能是在更改特定选项时触发ajax调用）

Answer 1

您可以使用click事件代替change：

＆＃13;

$("#captureMe").on('click', function(){
    console.log("got it!");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="persons" id="persons" multiple size="8">
   <option id="captureMe">Test option</option>
   <option value="" disabled="disabled">─────────</option>
   <option value="FR">Franck</option>
   <option value="GE">Georges</option>
   <option value="DA">David</option>
   <option value="LU">Luc</option>
   <option value="DO">Donald</option>
   <option value="FR">FRANCOIS</option>
</select>

＆＃13;

Answer 2

请查看以下代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select name="persons" id="persons" multiple size="8">
   <option id="captureMe">Test option</option>
   <option value="" disabled="disabled">─────────</option>
   <option value="FR">Franck</option>
   <option value="GE">Georges</option>
   <option value="DA">David</option>
   <option value="LU">Luc</option>
   <option value="DO">Donald</option>
   <option value="FR">FRANCOIS</option>
</select>
</body>
  <script>
     $("#persons").change(function() {
       var values = $("#persons").val();
       if($.inArray($("#captureMe").val(), values) > -1){
         if(!$("#captureMe").prop("isSelected")){
           $("#captureMe").prop("isSelected", true);
           console.log("'caputreMe' is selected");
         }
       }else{
         if($("#captureMe").prop("isSelected")){
           $("#captureMe").prop("isSelected", false);
           console.log("'caputreMe' is unselected");
         }
       }
     });
  </script>
</html>

＆＃13;

我希望它可以帮到你。再见。

Answer 3

$(document).on("change", "#persons", function() {alert("got it!");});

Answer 4

例如，您可以使用：selected selected，请参阅https://api.jquery.com/selected-selector/

$("select").change(function() {
  $("#captured-by-id:selected").each(function() {
    alert($(this).text());
  });
});

这是Fiddle。

Answer 5

是不是可以按照以下方式使其工作？

var selectedValue = "";

$("#persons").change(function() {

var values = $(this).val();
if()// condition to check if #captureme option is present in "selectedValue" variable
{
// logic
}
else if() // condition to check if #captureme was not present in "selectedValue" before and is selected now
{
 // logic
}

selectedValue = value;
});

我可以在选择的多个选项上绑定什么事件？

5 个答案: