salut je suis débutant à javascript ....
Je veux synchroniser le défilement de deux boîtes de sélection, de sorte que lorsque je fais défiler la première boîte de sélection, la barre de défilement d'un autre sélectionner boîte défile aussi ....synchroniser deux barres de défilement dans la boîte de sélection multiple
$(document).ready(function(){
$('#one').scroll(function(){
var length = $(this).scrollTop();
$('#two').scrollTop(length);
});
});
dans la plaine javascript vous le créer un gestionnaire d'événements pour l'événement de défilement qui lit la valeur scrollTop de l'élément concerné et définit la même valeur sur la deuxième élément.
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');
function select_scroll(e) {
s2.scrollTop = s1.scrollTop;
}
s1.addEventListener('scroll', select_scroll, false);
la question que je suis confronté est .... j'ai deux boîtes de sélection avec sélection multiple enabled.When i sélectionner un élément de la première zone de sélection, il défile en vue de l'élément correpondant de la deuxième list.The la sélection unique se passe bien dans tous les navigateurs explorateur, firefox, chrome. maintenant, si je sélectionne le premier, dernier élément de la première boîte de sélection la deuxième boîte de sélection ne fait pas défiler le dernier élément sélectionné dans chrome browser.although, cela fonctionne très bien dans Internet Explorer et Firefox mais pas dans google chrome navigateur. s'il vous plaît dites-moi où je me trompe ou est-ce là une meilleure façon de faire la même chose.
<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>
Ce qui suit est très simple, et je viens de confirmer cela fonctionne dans 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">