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:

Marker en option og vælg retning


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

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2005
Hjemmesideskolen
Du er her: Forsiden - html - Tilvælg / fravælg options
Brugere lige nu: 1
Home Mail