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

Vælg en option og flyt


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

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2005
Hjemmesideskolen
Du er her: Forsiden - html - Sorter options rækkefølge
Brugere lige nu: 1
Home Mail