Tilvælg / fravælg options

Siden er opdateret 28.7.2008

Funktioner i denne select-boks stammer oprindeligt fra Chr. Hansen

Flyt options mellem selectboksxe:

I sidens head anbringes et kald til et ekstern javascript - lagt eksternt for at siden kan validere:

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

Indholdet af denne eksterne scriptfil definerer nogle funktioner og variabler:

function addOption(text,value,box) {

  if(text) {

    var opt = new Option(text,value);

    var count = box.options.length;

    box.options[count] = opt;

  } else {

    alert("Du skal vælge en option, for du kan vælge retning");

  }

}



function moveOptions(from_box,to_box) {

  for(var c=(from_box.options.length - 1);c>=0;c--) {

      if(from_box.options[c].selected) {

        addOption(from_box.options[c].text,from_box.options[c].value,to_box);

        from_box.options[c] = null;

      }

    }

  }



function selectAll(box) {

    for(var c=0;c<box.options.length;c++) box.options[c].selected = true;

}

Endelig er der formularen, som også indholder lidt javascript:

<form action="#" method="get" id="frmSelectOption">

<fieldset>

<legend>Marker en option og vælg retning</legend>



<table border="0" cellspacing="0" cellpadding="5">

<tr><td>



<select name="box1" style="width:100px;height:100px;" ondblclick="selectAll(this);" size="20" multiple="multiple">

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>



</td>

<td style="vertical-align:middle">



<input type="button" value="<--" onclick="moveOptions(document.forms['frmSelectOption'].elements['box2'],

document.forms['frmSelectOption'].elements['box1'])" /><br /><br />



<input type="button" value="-->" onclick="moveOptions(document.forms['frmSelectOption'].elements['box1'],

document.forms['frmSelectOption'].elements['box2'])" />



</td>

<td>



<select name="box2" style="width:100px;height:100px;" ondblclick="selectAll(this);" size="20" multiple="multiple">

  <option>Option 4</option>

  <option>Option 5</option>

  <option>Option 6</option>

  <option>Option 7</option>

  <option>Option 8r</option>

</select>



</td>

</tr>

</table>

</fieldset>

</form>

Bemærk, at javascriptet i begge knapper skal skrives i en ubrudt linje uden mellemrum, selv om jeg i begge tilfælde har 'klippet' det over i to bidder!

^ Tilbage til sidens top

Tilvælg / fravælg options

Funktioner i denne select-boks stammer oprindeligt fra Chr. Hansen

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2005