Javascript 同步多个选择框中的两个滚动条_Javascript

Javascript 同步多个选择框中的两个滚动条

javascript

Javascript 同步多个选择框中的两个滚动条,javascript,Javascript,嗨，我是javascript的新手…… 我想同步两个选择框的滚动，这样当我向下滚动第一个选择框时，另一个选择框的滚动条也会滚动…… $(document).ready(function(){ $('#one').scroll(function(){ var length = $(this).scrollTop(); $('#two').scrollTop(length); }); }); 在纯javascript中，您将为scroll事件创建一个事件处理程序，从相关元素

嗨，我是javascript的新手……
我想同步两个选择框的滚动，这样当我向下滚动第一个选择框时，另一个选择框的滚动条也会滚动……

$(document).ready(function(){
  $('#one').scroll(function(){
    var length = $(this).scrollTop();
    $('#two').scrollTop(length);
  });
});

在纯javascript中，您将为scroll事件创建一个事件处理程序，从相关元素读取scrollTop值，并在第二个元素上设置相同的值

    var s1 = document.getElementById('Select1');
    var s2 = document.getElementById('Select2');

    function select_scroll(e) {

        s2.scrollTop = s1.scrollTop;
    }

    s1.addEventListener('scroll', select_scroll, false);

我面临的问题是。。。。我有两个启用了多选功能的选择框。当我从第一个选择框中选择一个元素时，它会从第二个列表中滚动到相应的元素。在所有浏览器浏览器explorer、firefox和chrome中，单选都可以。现在，如果我从第一个选择框中选择第一个、最后一个元素，则第二个选择框不会滚动到chrome浏览器中的最后一个选定元素的视图中。尽管它在internet explorer和firefox中运行良好，但在google chrome浏览器中运行不正常。请告诉我哪里错了，或者是否有更好的方法来执行相同的操作

<html>
<head>
<script language="javascript"> 
function SyncListsL(){
for (var i = 0; i <= [document.puser.user_select.length]-1; i++) {
    if(document.puser.user_select.options[i].selected == true)
    {
      document.puser.user_select2.options[i].selected=true;        document.puser.user_select.options[i].selected=true;
    }
    else{
        document.puser.user_select2.options[i].selected = false;
        document.puser.user_select.options[i].selected=false;
    }
} 
}
function SyncListsR(){ 
for (i = 0; i <= [document.puser.user_select2.length]-1; i++) {
    if(document.puser.user_select2.options[i].selected == true)
    {
document.puser.user_select.options[i].selected=true;               document.puser.user_select2.options[i].selected=true;
        }
    else{
        document.puser.user_select.options[i].selected = false;
        document.puser.user_select2.options[i].selected=false;
    }
} 
}
</script>
<title>scrollintoview</title>
</head>
<body bgcolor="e2dbc5">
<form name="puser" > 
<table align="center">
  <tr> 
<td align="right"  bgcolor="#eeeadd"> <font size=2>
    <select name="user_select2" multiple size="5" onChange="SyncListsR()" style="width:35mm">  
    <option value="a1" title="a1">a1</option>   
          <option value="a2" title="a2">a2</option>   
          <option value="ab" title="ab">ab</option>   
          <option value="abc" title="abc">abc</option>   
          <option value="e1" title="e1">e1</option>     
          <option value="e2" title="e2">e2</option>   
          <option value="new" title="new">new</option>   
          </select>
    </font></td>
  <td align="left" bgcolor="#eeeadd"> <font size=2>
     <select name="user_select"  multiple size="5" onChange="SyncListsL()" style="width:50mm">           
      <option value="first" title="first">first</option>          
      <option value="last" title="last">last</option>          
      <option value="ghi" title="ghi">ghi</option>           
      <option value="User" title="User">User</option>          
      <option value="ed" title="ed">ed</option> 
      <option value="edit" title="edit">edit</option> 
      <option value="second" title="second">second</option>
       </select>
      </font></td>
</tr>
 </table>
</form>
</body>
</html>


函数SyncListsL（）{
对于（var i=0；i而言，以下内容非常简单，我刚刚确认它在FF 3.6中有效
<form id=puser name=puser>
<select name=user_select1 onclick="document.puser.user_select2.selectedIndex = this.selectedIndex">
<select name=user_select2 onclick="document.puser.user_select1.selectedIndex = this.selectedIndex">