Artikel - Detailansicht

Im ersten Teil des Artikels wurden einzelne Einträge einer Selectbox zugewiesen, wobei der Benutzer die Einträge selbst eingeben konnte. Oft sieht man in Programmen die Möglichkeit, aus einer Liste von vorhandenen Möglichkeiten, Werte einer anderen Liste zuzuweisen, wobei gewählte Werte aus der Ausgangsliste verschwinden.
Das zweite Beispiel zeigt, wie dieses Verhalten mit Javascript simuliert werden kann:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function sel(){
   if (document.fo.liste1.length==0){
      //nur, wenn ein eintrag vorhanden!
      alert("Kein Eintrag gemacht!");
      return false;
   }

   //werte in hidden-element uebertragen
   document.fo.hid_liste.value=document.fo.liste1.options[0].value;
   for(i=1;i<document.fo.liste1.length;i++){
      document.fo.hid_liste.value=document.fo.hid_liste.value+","+
      document.fo.liste1.options[i].value;
   }
  
   //und abschicken
  return true;
}


function swap(outBox,inBox){
   //schiebt selektierten wert von outBox  nach inBox
   if (outBox.selectedIndex==-1) return;

   var wert=outBox.options[outBox.selectedIndex].value;
   inBox.options[inBox.options.length]=new Option(wert,wert);
   arr=new
   Array(outBox.length-1);
   idx=0
   for(i=0;i<outBox.length;i++){
      if (!(outBox.options[i].selected)) {
         arr[idx]=outBox.options[i].value;
         idx++;
      }
   }//for
  
   outBox.options.length=0;

   for (var i=0; i<arr.length; i++) {
      outBox.options[outBox.options.length]=new Option(arr[i],arr[i]);
   }
   outBox.selectedIndex=-1;

}
//-->
</SCRIPT>

<form name="fo" action="x.cfm" onSubmit="return sel()" method="post">
   <input type="hidden" name="hid_liste" value="">
   <table>
      <tr>
          <td>
              <select name="liste1" size="6">
     option><--------------------->
  </select>
            <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
              <!--
              document.fo.liste1.options.length=0;
              //-->
             </SCRIPT>
          </td>
          <td>
              <input type="button" value="<<"
                onClick="javascript:swap(document.fo.liste2,document.fo.liste1)">
              <br>
              <input type="button" value=">>"
                onClick="javascript:swap(document.fo.liste1,document.fo.liste2)">
          </td>
          <td>
                 <select name="liste2" size="6">
                 <option value="Aqua">Aqua
                 <option value="Black">Black
                 <option value="Blue">Blue
                 <option value="Fuchsia">Fuchsia
                 <option value="Gray">Gray
                 <option value="Green">Green
                 <option value="Lime">Lime
                 <option value="Maroon">Maroon
                 <option value="Navy">Navy
                 <option value="Teal">Teal
              </select>
          </td>
      </tr>
      <tr>
          <td colspan="3">
              <input type="submit">
          </td>
      </tr>
   </table>
</form>

Die Funktion ist ähnlich wie im ersten Teil erklärt. Auch hier werden beim Abschicken des Formulars die Werte aus der rechten Selectbox in ein HIDDEN-Feld übertragen.