Sorter options rækkefølge

Siden er opdateret 28.7.2008

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

Lav om på rækkefølgen

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

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

Indholdet af denne eksterne scriptfil definerer nogle funktioner og variabler:

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 chOrder(box,direction) {

  if(direction > 0 && box.selectedIndex < (box.length -1) || box.selectedIndex > 0 && direction < 0) {

    var newindex = box.selectedIndex + direction;

    var oldindex = box.selectedIndex

    var thisopt = new Option(box.options[oldindex].text,box.options[oldindex].value);

      box.options[oldindex] = new Option(box.options[newindex].text,box.options[newindex].value);

      box.options[newindex] = thisopt;

      box.options[oldindex].selected = false;

      box.options[newindex].selected = true;

    }

  }

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

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

<fieldset>

<legend>Vælg en option og flyt</legend>



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

<tr>

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



<input type="button" style="width:65px" value="Flyt op" onclick="chOrder(document.forms['frmMoveOption'].elements['box'],-1)" />

<br /><br />

<input type="button" style="width:65px" value="Flyt ned" onclick="chOrder(document.forms['frmMoveOption'].elements['box'],1)" />



</td>

<td>



<select name="box" style="width:100px;height:100px;" size="20">

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

  <option>Option 4</option>

  <option>Option 5</option>

</select>



</td>

</tr>

</table>

</fieldset>

</form>

^ Tilbage til sidens top

Sorter options rækkefølge

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

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2005