Flytning af værdier mellem comboBoxe

tænker du på:
http://www.skovenborg.1go.dk/javascript/selectMove.php

ikke helt..

Jeg har brug for et niveau mere, så jeg FØRST vælger indholdet af den føste box (f.eks fra en drop-down menu) og DEREFTER vælger en Option som jeg vil overføre til den sidste box.

nåå, du har altså ikke brug for at vælge mere end en option ad gangen? Måske du hellere skulle kigge på:
http://roenving.users.whitehat.dk/index.html?/WD4Selects-beta.html

jeah.. men i dit sidste eksempel kan man kun vælge een til sidst. Jeg brug for at man kan vælge mange ... fra forskellige før-valgte..

Kig på www.danbolig.dk under "KØB". Det er sådan jeg mener... Her kan man vælge et amt og derefter vælge en by som man overfører til boksen "valgte". Derefter kan man vælge et nyt amt og vælge endnu en by som man overfører til "valgte" osv.  Når man har valgt alle de byer man har brug for sendes formen.

Som jeg ser det, har man 3 arrays; et med amter, et med byer og et med valgteByer. På baggrund af amtet vises byerne. Vælger man en by - slettes den fra by-array'et og lægges i valgteByer-array'et.

Min problem er, at jeg ikke helt kan gennemskue hvordan jeg holder styr på byernes initial placering - den er jeg jo nød til at kende hvis brugeren fravælger en by; så skal den jo nemlig flyttes fra valgteByer-array'et og tilbage til by-array'et.

Det havde jo været dejligt nemt at kode i PHP med en database i røven, men jeg vil ikke have at siden skal opdateres hver gang brugeren træffer et valg...

Jeg giver gerne flere point for en god løsning....

hvis du har amter som fx
{'nordjylland':{'ålborg':001,'hjørring':002},
'århus':{'århus':003,'silkeborg':004}}
sådan at hver by har et ID som matcher din database, så kan du måske springe det sidste skridt over, og bare slette byen fra listen uden at bekymre dig om hvilket amt den er valgt fra...
når man vælger i den første boks (amt), ændres indholdet af den anden boks (byer). Når man vælger en by, tilføjes byen så som <option selected="true"> i den tredie boks <SELECT name="valgtebyer" multiple="true" >...

du kunne også på en eller anden måde kombinere de to scripts jeg viste, fx sådan her:
<script type="text/javascript">
var byarr = ["Bornholm","Nordjylland","Aarhus"];
byarr["Bornholm"] = ["Rønne","Svaneke","Aakirkeby"];
byarr["Nordjylland"] = ["Aalborg","Skagen","Frederikshavn"];
byarr["Aarhus"] = ["Brabrand","Grenå","Fjellerup","Silkeborg","Aarhus"];

function changeOpt(sel,tosel,remsel) {
    if (sel.selectedIndex > 0) {
        byer = byarr[sel.value];
        tsel = document.getElementById(tosel);
        tsel.length = 0;
        for (var i=0;i<byer.length;i++) {
            tsel.options[i] = new Option(byer[i],byer[i].replace(/ /g,"_"));
        }
        rsel = document.getElementById(remsel);
        rsel.length = 0;
    }
   
}
function moveFromTo(from,to) {
  fromElm = document.getElementById(from);
    toElm = document.getElementById(to);
    var sletArr = new Array();
    while (fromElm.selectedIndex != -1) {
        toElm.options[toElm.length] = new Option(fromElm.options[fromElm.selectedIndex].text,fromElm.options[fromElm.selectedIndex].value);
        fromElm.options[fromElm.selectedIndex] = null;
  }
}
</script>

<form>
To afhængige selects:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="changeOpt(this,'sel2','sel3')">
<option value="" selected="selected">Vælg Amt</option>
<option value="Bornholm">Bornholms Amt</option>
<option value="Nordjylland">Nordjyllands Amt</option>
<option value="Aarhus">Århus Amt</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel2" id="sel2" multiple="multiple" style="height:100px;">
</select>
<input type="button" value=">>" onclick="moveFromTo('sel2','sel3');">
<input type="button" value="<<" onclick="moveFromTo('sel3','sel2');">
<select multiple style="height:100px;" id="sel3">
</select>
</form>

-- og jeg kunne ikke lade være at bygge lidt videre på skovenborgs, da det irriterede mig, at man ikke kunne vælge fra flere amter, så følgende virker ret meget anderledes men næsten ens !-)

<script type="text/javascript">
var byarr = ["Bornholm","Nordjylland","Aarhus"];
byarr["Bornholm"] = ["Rønne","Svaneke","Aakirkeby"];
byarr["Nordjylland"] = ["Aalborg","Skagen","Frederikshavn"];
byarr["Aarhus"] = ["Brabrand","Grenå","Fjellerup","Silkeborg","Aarhus"];

function changeOpt(sel,tosel,remsel) {
  if (sel.selectedIndex > 0) {
    rsel = document.getElementById(remsel),vals = new Array();
    for(i=0;rsel.length>i;i++)vals[vals.length] = rsel.options[i].value;
    byer = byarr[sel.value];
    tsel = document.getElementById(tosel);
    tsel.length = 0;
    for (var i=0;byer.length>i;i++) {
      tsel.options[i] = new Option(byer[i],byer[i].replace(/ /g,"_"));
      for(j=0;vals.length>j;j++){
        if(vals[j] == tsel.options[i].value)tsel.options[i].style.background = 'bbb';
      }
    }
  }
}
function moveFromTo(from,to) {
  fromElm = document.getElementById(from);
  toElm = document.getElementById(to);
  var sletArr = new Array();
  for(i=0;fromElm.length>i;i++) {
    if(fromElm.options[i].selected&&fromElm.options[i].style.background != '#bbb'){
      toElm.options[toElm.length] = new Option(fromElm.options[i].text,fromElm.options[i].value);
      fromElm.options[i].style.background = '#bbb';
    }
  }
}
function remove(from,to){
  fromElm = document.getElementById(from),vals = new Array();
  toElm = document.getElementById(to);
  while (fromElm.selectedIndex != -1) {
    vals[vals.length] = fromElm.options[fromElm.selectedIndex].value;
    fromElm.options[fromElm.selectedIndex] = null;
  }
  for(i=0;toElm.length>i;i++){
    for(j=0;vals.length>j;j++){
      if(vals[j] == toElm.options[i].value){
        toElm.options[i].style.background = '#fff';
        break;
      }
    }
  }
}
</script>

<form>
To afhængige selects:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="changeOpt(this,'sel2','sel3')">
<option value="" selected="selected">Vælg Amt</option>
<option value="Bornholm">Bornholms Amt</option>
<option value="Nordjylland">Nordjyllands Amt</option>
<option value="Aarhus">Århus Amt</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel2" id="sel2" multiple="multiple" style="height:100px;">
</select>
<input type="button" value=">>" onclick="moveFromTo('sel2','sel3');">
<input type="button" value="<<" onclick="remove('sel3','sel2');">
<select multiple style="height:100px;" id="sel3">
</select>
</form>

jamen tak skal du ha' roenving - havde faktisk ikke skænket det en tanke ;-)

Tak for jeres svar... jeg tager på ferie til den 20/7.. så kigger jeg på dem bagefter og giver jer en tilbagemelding...

Spørgsmålet lukkes

Tak for tilbagemeldingen !-(