Question

我正在使用$（'option'）。mousedown函数允许我的多选列表进行多项选择。

当在页面上加载创建多选列表时，它可以正常工作。

但它不适用于使用javascript函数构建的多选列表。

以下是我的mousedown事件代码

       $('option').mousedown(function(e) {// alert('dsds');
           e.preventDefault();  
           $(this).prop('selected', $(this).prop('selected') ? false : true);

          return false;
      });

以下是我使用javascript构建的列表。

      $.each(vellalarSubCastList, function(j, option) {

        var $option = $("<option>", {text: option.name, value: option.id});
        $option.appendTo($indiaSubCastes);
     });

Answer 1

很有可能在生成选项列表之前附加“mousedown”事件。生成列表后尝试调用它。

或者，您是否考虑过使用“multiple”属性？

http://www.w3schools.com/tags/att_select_multiple.asp

或者只是使用像https://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

这样的插件

Answer 2

我同意Ting Sung说您在创建option之前附加了处理程序。您只能将处理程序附加到DOM中已存在的元素。

如果在页面加载时生成一次列表，可以通过更改代码中的顺序来解决这个问题。否则你应该使用委托的处理程序，如下所示：

  $('select').on('mousedown' ,'option' ,function(e) {// alert('dsds');
       e.preventDefault();  
       $(this).prop('selected', $(this).prop('selected') ? false : true);

      return false;
  });

处理程序附加到select元素，但由任何子mousedown元素上的option触发。第二个参数过滤哪个子元素将在第一个参数中接收事件。无论何时将它们添加到DOM中，这都有效。

如果select也是动态生成的，并且您无法在此之后附加处理程序，则可以将其附加到div或您要附加到的任何其他元素。

通常也建议使用这种方式，因为您只需要为每个select列表附加一个处理程序。使用$('option')意味着将单独的处理程序附加到文档中的每个option。虽然这对于较小的列表是可以的，但随着它们变长，它的效率会降低。

$（'option'）。mousedown事件在少数情况下不起作用

2 个答案: