Søg
Avatar billede senj Nybegynder
18. maj 2002 - 13:23 Der er 14 kommentarer og
1 løsning

Synkron scroll i <select>

Jeg skal bruge noget javascript der scroller i én select på baggrund af scrollet i en anden select. Se eks. på de to selects.
Avatar billede senj Nybegynder
18. maj 2002 - 13:24 #1
<html>
<head>
</head>
<body>
<table>
  <tr>
    <td align=center>
      <select class="selectmedium" name="menu1" size=7>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
      <option>Option 6</option>
      <option>Option 7</option>
      <option>Option 8</option>
      </select>
    </td>
    <td></td>
    <td align=center>
      <select class="selectmedium" name="menu2" size=7>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      </select>
    </td>
    </tr>
</table>
</body>
</html>
Avatar billede atn Nybegynder
18. maj 2002 - 23:56 #2
Hejsa !

Du kan ikke checke scroll position i en selectboks - du kan kun checke hvilke option der er valgt...

Jeg har lavet et lille eksempel på et valg i den ene select - der så syncronisere med den anden select...

Håber du kan bruge det til noget...

Venligst

<ATN/>

*********| Code start |**********


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <script language="javascript" type="text/javascript">
    function syncroSelect(p) {
        document.all.menu2.options[p.options.selectedIndex].selected = true;
    }
    </script>
</head>
<body>
<table>
  <tr>
    <td align=center>
      <select class="selectmedium" name="menu1" size=7 onchange="syncroSelect(this)">
      <option>--------------</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
      <option>Option 6</option>
      <option>Option 7</option>
      <option>Option 8</option>
      </select>
    </td>
    <td></td>
    <td align=center>
      <select class="selectmedium" name="menu2" size=7>
      <option>--------------</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      </select>
    </td>
    </tr>
</table>
</body>
</html>

**********| Code end |*********
Avatar billede senj Nybegynder
19. maj 2002 - 10:28 #3
Hmm.. det var lidt ærgeligt og er du helt sikker på at det ikke kan lade sig gøre? Din funktion spiller fint men jeg hvade selv løst det på samme måde uden at være tilfreds. Jeg lader den stå et øjeblik for at se om andre har et indput.
Avatar billede atn Nybegynder
19. maj 2002 - 10:53 #4
99,9% sikker...

der kan jo dukke noget nyt op ! ;o)

venligst

<ATN/>
Avatar billede ras2000 Nybegynder
21. maj 2002 - 15:49 #5
Du kan ikke gøre det i en select. Af en eller anden grund kan man ikke køre en onscroll på den. Du kan lave din egen select box, med divs, spans eller layers. Jeg prøver lige at strikke en sammen til dig...
Avatar billede ras2000 Nybegynder
21. maj 2002 - 16:03 #6
Her er en lidt amatøragtig løsning, der virker. Den kan sagtens gøres pænere.
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
forrige = "";
function scroller(el){
    document.all.valg2.scrollTop = el;
}
function vaelg(el){
    el.style.backgroundColor = '#0000c0';
    el.style.color = '#ffffff';
    if (forrige != ""){
        forrige.style.backgroundColor = "";
        forrige.style.color = "";
    }
    forrige = el;
}
</script>
</head>
<body>
<table>
  <tr>
    <td align=center><div style="height:100;width:100;overflow:auto" onscroll="scroller(this.scrollTop)" id="valg1">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td onclick="vaelg(this)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    <td></td>
    <td align=center><div style="height:100;width:100;overflow:auto" onscroll="scroller(this.scrollTop)" id="valg2">
    <table width="100%">
        <tr>
            <td onclick="vaelg(this)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg(this)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    </tr>
</table>
</body>
</html>
Avatar billede senj Nybegynder
21. maj 2002 - 16:07 #7
Det er sku slet ikke så tosset. Kan du sætte en ramme på dem begge og fjerne scrollbaren på den højre select?
Avatar billede ras2000 Nybegynder
21. maj 2002 - 16:12 #8
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
forrige1 = "";
forrige2 = "";
function scroller(el){
    document.all.valg2.scrollTop = el;
}
function vaelg1(el){
    el.style.backgroundColor = '#000066';
    el.style.color = '#ffffff';
    if (forrige1 != ""){
        forrige1.style.backgroundColor = "";
        forrige1.style.color = "";
    }
    forrige1 = el;
}
function vaelg2(el){
    el.style.backgroundColor = '#000066';
    el.style.color = '#ffffff';
    if (forrige2 != ""){
        forrige2.style.backgroundColor = "";
        forrige2.style.color = "";
    }
    forrige2 = el;
}
</script>
</head>
<body>
<table>
  <tr>
    <td align=center><div style="height:100;width:100;overflow:auto;border-style:inset;font-family:sans-serif" onscroll="scroller(this.scrollTop)" id="valg1">
    <table width="100%" cellpadding="0" cellspacing="0" style="cursor:hand">
        <tr>
            <td onclick="vaelg1(this)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    <td></td>
    <td align=center><div style="height:100;width:100;overflow:hidden" onscroll="scroller(this.scrollTop)" id="valg2">
    <table width="100%" cellpadding="0" cellspacing="0" style="cursor:hand">
        <tr>
            <td onclick="vaelg2(this)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    </tr>
</table>
</body>
</html>
Avatar billede ras2000 Nybegynder
21. maj 2002 - 16:13 #9
Hov der manglede lidt.
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
forrige1 = "";
forrige2 = "";
function scroller(el){
    document.all.valg2.scrollTop = el;
}
function vaelg1(el){
    el.style.backgroundColor = '#000066';
    el.style.color = '#ffffff';
    if (forrige1 != ""){
        forrige1.style.backgroundColor = "";
        forrige1.style.color = "";
    }
    forrige1 = el;
}
function vaelg2(el){
    el.style.backgroundColor = '#000066';
    el.style.color = '#ffffff';
    if (forrige2 != ""){
        forrige2.style.backgroundColor = "";
        forrige2.style.color = "";
    }
    forrige2 = el;
}
</script>
</head>
<body>
<table>
  <tr>
    <td align=center><div style="height:100;width:100;overflow:auto;border-style:inset;font-family:sans-serif" onscroll="scroller(this.scrollTop)" id="valg1">
    <table width="100%" cellpadding="0" cellspacing="0" style="cursor:hand">
        <tr>
            <td onclick="vaelg1(this)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    <td></td>
    <td align=center><div style="height:100;width:100;overflow:hidden;border-style:inset;font-family:sans-serif" onscroll="scroller(this.scrollTop)" id="valg2">
    <table width="100%" cellpadding="0" cellspacing="0" style="cursor:hand">
        <tr>
            <td onclick="vaelg2(this)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg2(this)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    </tr>
</table>
</body>
</html>
Avatar billede senj Nybegynder
21. maj 2002 - 16:25 #10
Det er sku udemærket det der ! En sidste ting skal være, at når man markere en i den højre så skal markeringen være på den samme række i den venstre - altså synkron markering. Hvis den højre ligeledes kan disabled, så er vi i mål.
Avatar billede ras2000 Nybegynder
21. maj 2002 - 16:49 #11
Ked af det, det kan ikke blive idag, jeg er på vej ud i det gode vejr. Jeg kigger ind igen imorgen.
Avatar billede ras2000 Nybegynder
21. maj 2002 - 16:58 #12
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
forrige1 = "";
forrige2 = "";
function scroller(el){
    document.all.valg2.scrollTop = el;
}
function vaelg1(el, n){
    a = 0;
    el.style.backgroundColor = '#000066';
    el.style.color = '#ffffff';
    if (forrige1 != ""){
        forrige1.style.backgroundColor = "";
        forrige1.style.color = "";
    }
    forrige1 = el;
    for (i=0;i<document.all.valg2.all.length;i++){
        if (document.all.valg2.all[i].tagName == "TD"){
            a++;
            if (a == n+1) vaelg2(document.all.valg2.all[i]);
        }
    }
}
function vaelg2(el){
    el.style.backgroundColor = '#000066';
    el.style.color = '#ffffff';
    if (forrige2 != ""){
        forrige2.style.backgroundColor = "";
        forrige2.style.color = "";
    }
    forrige2 = el;
}
function doit(){
    document.all.her.execCommand("copy");
}
</script>
</head>
<body>
<table>
  <tr>
    <td align=center><div style="height:100;width:100;overflow:auto;border-style:inset;font-family:sans-serif" onscroll="scroller(this.scrollTop)" id="valg1">
    <table width="100%" cellpadding="0" cellspacing="0" style="cursor:hand">
        <tr>
            <td onclick="vaelg1(this, 0)">Valg 1</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 1)">Valg 2</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 2)">Valg 3</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 3)">Valg 4</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 4)">Valg 5</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 5)">Valg 6</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 6)">Valg 7</td>
        </tr>
        <tr>
            <td onclick="vaelg1(this, 7)">Valg 8</td>
        </tr>
    </table></div>
    </td>
    <td></td>
    <td align=center><div style="height:100;width:100;overflow:hidden;border-style:inset;font-family:sans-serif" onscroll="scroller(this.scrollTop)" id="valg2">
    <table width="100%" cellpadding="0" cellspacing="0" style="cursor:default">
        <tr>
            <td>Valg 1</td>
        </tr>
        <tr>
            <td>Valg 2</td>
        </tr>
        <tr>
            <td>Valg 3</td>
        </tr>
        <tr>
            <td>Valg 4</td>
        </tr>
        <tr>
            <td>Valg 5</td>
        </tr>
        <tr>
            <td>Valg 6</td>
        </tr>
        <tr>
            <td>Valg 7</td>
        </tr>
        <tr>
            <td>Valg 8</td>
        </tr>
    </table></div>
    </td>
    </tr>
</table>
</body>
</html>
Avatar billede senj Nybegynder
21. maj 2002 - 16:58 #13
Finno finno
Avatar billede ras2000 Nybegynder
22. maj 2002 - 08:14 #14
Point?
Avatar billede senj Nybegynder
22. maj 2002 - 09:35 #15
Kommer her!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
18/0919:52 Libre office skriveprogram Af Frank i Office & Kontorpakker
17/0914:55 Hente WordPad til Windows 11 Af Strawberry i Andet software
17/0911:37 Persits.Upload Af bsn i ASP
16/0918:13 oprette et installationsmedie Af Malm i Windows
16/0913:11 Adapterstik stik på ladekabel til USB-C Af ErikHg i Andet software
White papers
Flere white papers »