Question

我有一个非常简单的选择框：

<select multiple="multiple" name="Condiments">
  <option selected="selected">Mustard</option>
  <option selected="selected">Ketchup</option>
</select>

我正在使用jQuery UI MultiSelect Widget让它变得有点抽搐：

https://github.com/ehynds/jquery-ui-multiselect-widget

具体来说，我正在尝试在窗口小部件初始化时动态设置动态之一。当我这样做时：

$("select").multiselect({
  selectedText: function(numChecked, numTotal, checkedItems){
    return "Foo";
  }
});

它正确地将selectedText选项设置为“Foo”但是当我这样做时：

$("select").multiselect({
  selectedText: function(numChecked, numTotal, checkedItems){
    return $(this).attr("name");
  }
});

它认为$（this）是来自DOM中其他地方的跨度。

如果页面上只有一个选择，那就没问题了，但是有多个我需要一种为每个选项设置此选项的方法。是否有明显的方法从$（this）到当前的select元素？或解决同一个普遍问题的明显替代方案？

Answer 1

我认为在selectedText回调中，this是用于检测<select>元素的多选功能的JavaScript对象。它有一个element属性，它是一个包装<select>元素的jQuery对象。

因此你应该使用：

$("select").multiselect({
    selectedText: function(numChecked, numTotal, checkedItems){
        return this.element.attr("name");
    }
});

Answer 2

在多个元素上初始化插件的常用方法是，需要从未插入到插件中的元素实例传递特定数据或属性，使用each循环遍历元素集合：

$('select').each(function(){
   /* "this" will be instance of "select"*/
  /* prep data needed before initialiizing plugin*/

   var name= this.name;
   /* initialize plugin for current instance of element*/
   $(this).multiselect({
      selectedText: function(numChecked, numTotal, checkedItems){
        /* variable declared above*/
         return name;
       }
    });

});

我不知道特定的插件，或者回调中的this是什么，但是使用所示的方法没有必要知道实例已经在each循环内被隔离

编辑。我写这篇文章时没有想到插件是<select>元素。不确定为什么要返回name ..对于所选的任何选项都是一样的

＆＃39;这＆＃39;在JS函数中返回不同于预期的对象

2 个答案: