Question

我已经使用了自定义插件，该插件为optgroup提供了此功能Add scroll position return on select1. Add optgroup capability

自定义 bootstrap-duallistbox (with optgroup feature)

我在plunker中创建了一个示例示例，其中显示了一个运行示例。选项组工作正常，但问题是即使我把 move-on-select =＆＃34; false＆＃34; 仍然只有鼠标点击动作。

任何人都可以告诉我为什么这样做

  <select  ng-model="modal.selectedItems"
                       ng-options="item.name group by item.app for item in modal.allItems"
                       multiple
                       bs-duallistbox
                       move-on-select=false
  ></select>

Answer 1

老实说，最简单的解决方案就是改变selectGroup的实现。我认为应该是这样的：

function selectGroup(e) {
  if(e.data.dlb.settings.moveOnSelect) {
    move(e.data.dlb);
  }
  e.preventDefault();
}

您可能希望对unselectGroup进行类似的更改。当前的实现具有奇怪的行为，它会移动未被选中的东西，因为它永远不会正确选择任何东西。

编辑：

选择的方式是错误的。我不知道作者的意图，但我怀疑这种实现更接近用户的期望：

function selectGroup(e) {
  if (e.target.tagName != 'OPTGROUP') return;
  $(this).find('option').each(function (index, item) {
    var $item = $(item);
    if (!$item.data('filtered1')) {
      if (!$item.prop('selected')) {
        $item.prop('selected', true);
      } else {
        $item.removeAttr('selected');
      }
    }
  });
  if(e.data.dlb.settings.moveOnSelect) {
    move(e.data.dlb);
  }
  e.preventDefault();
}

再次对unselectGroup进行类似的更改。在原始代码中，问题是当您点击某个人option时，点击会冒泡到optgroup，因此if后卫。此外，不应直接更改选择状态。这已在move函数中处理。更改selected属性更好，move函数稍后会消化该属性。通过这种方式，它还可以直观地清楚实际选择的内容。因此，当您单击optgroup时，应在每个项目属性上选择切换。您可能想要修改所选属性的删除方式。

Answer 2

使用

http://www.virtuosoft.eu/code/bootstrap-duallistbox/

as @prakash在Commments中说道。

项目正在bootstrap-duallistbox中单击鼠标

2 个答案: