synchronize two scrolling bars in multiple selection box
hi i am newbie to javascript....
i want 开发者_如何学运维to synchronize scrolling of two select boxes, so that when i scroll down the first select box the scroll bar of another select box also scrolls....$(document).ready(function(){
$('#one').scroll(function(){
var length = $(this).scrollTop();
$('#two').scrollTop(length);
});
});
JS Bin Demo
in plain javascript the you would create an event handler for the scroll event that reads the scrollTop value from the relevant element and sets the same value on the second element.
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');
function select_scroll(e) {
s2.scrollTop = s1.scrollTop;
}
s1.addEventListener('scroll', select_scroll, false);
The following is very simple, and I just confirmed it works in 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">
the issue i am facing is.... i have two select boxes with multiple selection enabled.When i select an element from first select box it scrolls into view the corrosponding element from the second list.The single selection goes fine in all browsers explorer,firefox,chrome. now, if i select the first,last element from the first selection box the second select box does not scrolls into view the last selected element in chrome browser.although , it works fine in internet explorer and firefox but not in google chrome browser.please tell me where i am wrong or is it there a better way to do the same.
<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>
加载中,请稍侯......
精彩评论