Jquery多选框不会滚动到所选选项

Question

我正在使用从这里获取的JQuery Multiselect插件：http://www.erichynds.com/blog/jquery-ui-multiselect-widget

当选项列表很长时，会出现滚动条，但它不会自动滚动到所选选项。这意味着，选择第50个选项后，如果我想要选择第51个选项，我必须再次向下搜索整个选项列表。

你知道如何解决这个问题吗？我尝试使用scrolltTop但没有成功。

代码非常简单...

$(function(){
   $("select").multiselect({multiple: false, selectedList: 1});
});

这是一个存在问题的jsfiddle示例：http://jsfiddle.net/g5r92/1/

提前感谢您的帮助。

- yaiza

Answer 1

请看这个链接，第一次尝试，效果良好：

http://jsfiddle.net/g5r92/7/

 $(function(){
   $("select").multiselect({multiple: false, selectedList: 1});
   $('.ui-multiselect').click(function(){

      $('.ui-multiselect-checkboxes').animate({
         scrollTop: $(".ui-multiselect-checkboxes .ui-state-active").offset().top
      }, 2000);
   });    

  });

您只需要根据自己的需求进行调整，将偏移量增加一些额外的像素，它就会将所选选项滚动到中间而不是顶部。

- john Smith

---

你说得对，它确实起作用了。我的问题是因为在同一页中我有不止一个多选框，所以除了第一个之外，offset（）。top对于任何其他多选框始终为零。 - yaiza

Answer 2

你说得对，它确实有效。我的问题是因为我在同一页上有多个多选框，所以offset().top对于除第一个之外的任何多选框始终为零（而我没有注意到它对于第一个不是零...）。用这个解决了：

$('.ui-multiselect-checkboxes').scrollTop($($('.ui-multiselect-checkboxes .ui-state-active')[index]).offset().top);

其中 index 是页面中多选框的索引。

非常感谢！

- yaiza

Answer 3

我建议您编辑您的“jQuery MultiSelect UI Widget 1.12”JS文件，在打开菜单选项时进行“自动选择”。

在您的文件中，搜索以下内容：（始终选择第一项） this.labels.eq(0).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');

并将其更改为：（动态选择）

var idxSelected = 0; if (o.multiple == true){ // 找到第一个已选中的。 idxSelected = $container.find('input[type=checkbox]:checked:first').parent().parent().index(); }
else { // 找到已选中的那个 idxSelected = $container.find('.ui-state-active:first').parent().index(); } idxSelected = idxSelected < 0 ? 0 : idxSelected ; this.labels.eq(idxSelected).trigger('mouseover').trigger('mouseenter').find('input').trigger('focus');

在多个+单个列表上测试了FF + CHROME + IE

- mr.baby123