Jquery Multiselect不会滚动到选定的选项答案

【问题标题】：Jquery Multiselect doesn't scroll to selected optionJquery Multiselect不会滚动到选定的选项
【发布时间】：2013-06-08 18:08:30
【问题描述】：

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

When the list of options is long a scroll appears, but it doesn't scroll automatically to the selected option.也就是说，在选择了第 50 个选项后，如果我想选择第 51 个选项，我必须一直向下搜索。

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

代码真的很简单……

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

这是一个解决这个问题的 jsfiddle：http://jsfiddle.net/g5r92/1/

非常感谢。

【问题讨论】：

标签： javascript jquery scroll multi-select

【解决方案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);
   });    

  });

您只需要根据自己的需要调整它，在偏移量中添加一些额外的像素，它会在中间而不是最顶部滚动所选选项

【讨论】：

你是对的，它确实有效。我的问题是因为我在同一页面中有多个多选，所以当 offset().top 对于除第一个之外的任何多选始终为零时。

【解决方案2】：

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

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

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

非常感谢！

【讨论】：

【解决方案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){ // find first checked. idxSelected = $container.find('input[type=checkbox]:checked:first').parent().parent().index(); } else { // find the one that checked 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 上测试（在多个 + 单个列表上）

【讨论】：