如何同步滚动两个列表框？

Question

我有两个列表框，一对一映射。它们也是可滚动的。我想同步这两个列表框之间的滚动。例如，如果我向下滚动第一个列表框，则第二个列表框应自动向下滚动相同数量的项目，使得两个列表框上的选项应始终显示在同一行中。我怎样才能在JSF中实现这一目标？

Answer 1

您可以使用JavaScript执行所需操作。我建议使用jQuery（或其他跨浏览器的JS库）来节省编写适用于所有主流浏览器的vanilla JavaScript的恶化。

如果生成的标记如下所示：

<select id="foo"><!-- snip options --></select>
<select id="bar"><!-- snip options --></select>

然后这个jQuery会让他们同步：

var bar = $('#bar').get(0);

$('#foo').change(function() {
    bar.selectedIndex = this.selectedIndex;
});

Demo