flytte data fra en select box til en anden

F.eks.

<form>
<table border="0">
    <tr>
        <td colspan="1"><center>Box1</td>
        <td colspan="1"><center>Knapper</td>
        <td colspan="1"><center>Box2</td>
    </tr>
    <tr>
        <td colspan="1" align="right">
            <select name="module_no_access" multiple="5" style="width: 100px; height: 150px;">
            <option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option><option value="4">Item 4</option><option value="5">Item 5</option><option value="6">Item 6</option><option value="7">Item 7</option><option value="8">Item 8</option><option value="9">Item 9</option><option value="10">Item 10</option>           
           
            </select>
            </td>
   
        <td colspan="1" align="center">
            <input type="button" name="add_modul" value="Tilføj >>" onclick="move('to',this);">
            <br><br>
            <input type="button" name="remove_modul" value="<< Fjern" onclick="move('from',this);">
        </td>
       
        <td colspan="1" align="left">
            <select name="module_access" multiple="5" style="width: 100px; height: 150px;">
            </select>
        </td>
    </tr>
</table>
</form>

<script type="text/javascript">
function move(act,elm){
  var f = elm.form;
  var elm1 = f.elements["module_no_access"];
  var elm2 = f.elements["module_access"];
  var fromElm = act == "to" ? elm1 : elm2;
  var toElm = act == "to" ? elm2 : elm1;
  for(i=fromElm.length-1;i>-1;i--){
    if(fromElm.options[i].selected){
      toElm.options[toElm.length] = new Option(fromElm.options[i].text,fromElm.options[i].value);
      fromElm.options[i] = null;
    }
  }
}
</script>

Det ser jo ud til at virke som det skal. 2 ting, når jeg overføre noget fra den ene box til den anden er det så muligt at den kan opdatere listen så tingene kommer til at stå alfabetisk?

Og kan jeg lokke dig til at kommentere koden "javascriptet" da jeg ikke aner en meget til javascript?

Hrm, sortering, ja, den havde jeg tænkt på, men det giver lige en hel del mere ...

function move(act,elm){//action og en henvisning til elementet, der kalder, så formen kan findes simplest muligt
  var f = elm.form;//knappens 'far' er formen
  var elm1 = f.elements["module_no_access"];//find første select
  var elm2 = f.elements["module_access"];//find anden select
  var fromElm = act == "to" ? elm1 : elm2;//Hvis det er øverste knap, er fra den første, ellers den anden
  var toElm = act == "to" ? elm2 : elm1;//Hvis det er nederste knap, er fra den anden, ellers den første
  for(i=fromElm.length-1;i>-1;i--){//Start bagfra i fra-selecten
    if(fromElm.options[i].selected){//Undersøg om option er markeret
      //Hvis den er, skal den tilføjes til til-selecten
      toElm.options[toElm.length] = new Option(fromElm.options[i].text,fromElm.options[i].value);
      fromElm.options[i] = null;//-- og slettes fra fra-selecten
    }
  }
}

-- overvejer lige sorteringen ...

Og så en sidste ting, når jeg trykker på min submit knap skal den gerne poste indholdet af begge bokse med, har rettet navne på boksene til box1[] og box2[]

Hvis du også kan lave dette eller forklare mig hvordan jeg gør. smider jeg 200point til dig.

Sorteringen:

<script type="text/javascript">
function move(act,elm){
  var f = elm.form;
  var elm1 = f.elements["module_no_access"];
  var elm2 = f.elements["module_access"];
  var fromElm = act == "to" ? elm1 : elm2;
  var toElm = act == "to" ? elm2 : elm1;
  var optArray = [],opt;
  for(i=0,im=toElm.length;im>i;i++){
    opt = toElm.options[i]
    optArray[optArray.length] = [opt.text,opt.value];
  }
  toElm.length = 0;
  for(i=fromElm.length-1;i>-1;i--){
    if(fromElm.options[i].selected){
      optArray[optArray.length] = [fromElm.options[i].text,fromElm.options[i].value];
      fromElm.options[i] = null;
    }
  }
  optArray.sort(optSort);
  for(i=0,im=optArray.length;im>i;i++)
    toElm.options[toElm.length] = new Option(optArray[i][0],optArray[i][1]);
}
function optSort(a,b){
  return a[0] > b[0] ? 1 : a[0] == b[0] ? 0 : -1;
}
</script>

-- for at få alle værdier i begge bokse med, skal alle elementer selectes, så f.eks. sådan her onsubmit:

<form ... onsubmit="markerSelects(this);">

function markerSelects(f){
  var sel = f.elements["module_no_access"];
  for(i=0,im=sel.length;im>i;i++)
    sel.options[i].selected = true;
  sel = f.elements["module_access"];
  for(i=0,im=sel.length;im>i;i++)
    sel.options[i].selected = true;
}

OKay det ser cool nok ud, har desværre ikke mulighed for at teste det på denne computer, men lige så snart det er testet, så smider jeg point, bare smid svar nu, da det arbejde du har lavet indtil videre er point værd.

Det ser ud til at det virker som det skal.

smid et svar...

Kan jeg egentlig lægge koden mellem <script> og </script> i en *.js fil og include?

Du kan sagtens lægge det i en ekstern fil:

<script type="text/javascript" src="moveScript.js"></script>

-- men i en script-fil må der ikke være html-kode, altså skal kun den rene javascript-kode _mellem_ <script> og </script> med !-)

Velbekomme '-)

-- og tak for point ;~}

arh glemte at forhøje point, hvis du gerne vil have de sidste 140point så laver jeg lige et spg. det må du undskylde var ikke ude på at snyde dig... Og har været ekstremt glad for din hjælp.

Nej tak, ellers tak !-)

OKay, jeg takker så en gang til.