[JS] van listbox naar listbox and back

Pagina: 1
Acties:

  • sharkzor
  • Registratie: Maart 2000
  • Laatst online: 07-04 15:44
Een simpel probleem dacht ik zo, want ik heb het vaker gezien.
ik loop me alleen rot te zoeken hoe ik dit ga doen...

2 listboxen:
1 met beschikbare 'onderdelen'
1 met toegevoegde 'onderdelen'

dmv een add en remove knop wil ik de onderdelen tussen de 2 listboxen kunnen verplaatsen en op het laatst een submit doen om alles uit listbox 2 via een php script op te slaan in de database.

de vraag is hoe moet dat met javascript als ik op een knop druk dat alles geselecteerd van links naar rechts gaat en omgekeerd? en bij het sumbitten moet de rechter kolom natuurlijk ffe allemaal selected worden anders geeft hij niks door...
google was vandaag niet mn vriend :(

  • André
  • Registratie: Maart 2002
  • Laatst online: 07-04 14:13

André

Analytics dude

Op deze manier lijkt het wel heel erg een scriptrequest, kun je ook aangeven wat je al geprobeerd hebt en wat er niet lukte? In de search is genoeg te vinden over het toevoegen van options aan een select element, en hoe doen sites het waar je dit soort dingen ziet? Daar kun je ook veel van leren :)

Verwijderd

je bedoeld zoiets?
message 624258

Denk dat je hier een end mee moet kunnen komen :-)

  • sharkzor
  • Registratie: Maart 2000
  • Laatst online: 07-04 15:44
Heb nu al iets wat ook werkt. lijkt veel op het antwoord van '____Spokey____ '

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<select multiple size="3" name="lijst1[]" id='list1' 
onDblClick="move(list1,list2)">
<option value="blabla">dit en dat</option>
</select>

<input type="button" onClick="move(list1,list2)" value=">>" id=button1 name=button1>
<input type="button" onClick="move(list2,list1)" value="<<" id=button2 name=button2>           

<SELECT name="lijst2[]" id="list2" size="3" MULTIPLE onDblClick="move(list2,list1)">
<option value="flskdjfkl">je pa is je ma</option>
</SELECT>

<script type="text/javascript">

function move(fbox, tbox)
{
     var arrFbox = new Array();
     var arrTbox = new Array();
     var arrLookup = new Array();
     var i;
     for(i=0; i<tbox.options.length; i++)
     {
          arrLookup[tbox.options[i].text] = tbox.options[i].value;
          arrTbox[i] = tbox.options[i].text;
     }
     var fLength = 0;
     var tLength = arrTbox.length
     for(i=0; i<fbox.options.length; i++)
     {
          arrLookup[fbox.options[i].text] = fbox.options[i].value;
          if(fbox.options[i].selected && fbox.options[i].value != "")
          {
               arrTbox[tLength] = fbox.options[i].text;
               tLength++;
          } else
          {
               arrFbox[fLength] = fbox.options[i].text;
               fLength++;
          }
     }
     arrFbox.sort();
     arrTbox.sort();
     fbox.length = 0;
     tbox.length = 0;
     var c;
     for(c=0; c<arrFbox.length; c++)
     {
          var no = new Option();
          no.value = arrLookup[arrFbox[c]];
          no.text = arrFbox[c];
          fbox[c] = no;
     }
     for(c=0; c<arrTbox.length; c++)
     {
         var no = new Option();
         no.value = arrLookup[arrTbox[c]];
         no.text = arrTbox[c];
         tbox[c] = no;
     }
}
</script>