синхронизировать две полосы прокрутки в окне множественного выбора - PullRequest
Новая
       3

синхронизировать две полосы прокрутки в окне множественного выбора

4 голосов
/ 25 марта 2010

привет, я новичок в javascript ....
я хочу синхронизировать прокрутку двух полей выбора, чтобы при прокрутке вниз первого окна выбора полоса прокрутки другого поля выбора также прокручивалась ....

Ответы [ 4 ]

14 голосов
/ 25 марта 2010 
$(document).ready(function(){
  $('#one').scroll(function(){
    var length = $(this).scrollTop();
    $('#two').scrollTop(length);
  });
});

JS Bin Demo

2 голосов
/ 01 октября 2010

Следующее очень просто, и я только что подтвердил, что оно работает в 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">
2 голосов
/ 25 марта 2010

в простом 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);
0 голосов
/ 26 марта 2010

проблема, с которой я сталкиваюсь ... У меня есть два поля выбора с включенным множественным выбором. Когда я выбираю элемент из первого поля выбора, он прокручивается, чтобы отобразить соответствующий элемент из второго списка. Один выбор подходит для всех браузеров, Firefox, Chrome. Теперь, если я выбираю первый, последний элемент из первого поля выбора, второе поле выбора не прокручивает для просмотра последнего выбранного элемента в браузере Chrome. Хотя, он отлично работает в Internet Explorer и Firefox, но не в Google Chrome browser.please скажи мне, где я ошибаюсь, или это лучший способ сделать то же самое. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...