Tilføj / fjern option - vis værdi

Siden er opdateret 28.7.2008

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

Tilføj og fjern options fra en selectboks:

Husk både tekst og værdi ved tilføjelse



  

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

<script type="text/javascript" src="tilfojsletvis.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 skrive en optiontekst, for at kunne tilføje");
  }
}

function removeOption(box) {
  try {
    if(box.options[box.selectedIndex])
      box.options[box.selectedIndex] = null;
    else
      alert("Du skal vælge en option, for at kunne fjerne den");
  } catch (e) {
      //exception thrown when user has not selected an option
      alert("Du skal vælge en option, for at kunne fjerne den");
    }
  }

function showOption(box) {
  try {
      var out = "Option text = ";
      out += box.options[box.selectedIndex].text;
      out += "\n";
      out += "Option value = ";
      out += box.options[box.selectedIndex].value;
      alert(out);
  } catch(e) {
      //exception thrown when user has not selected an option
      alert("Du skal vælge en option, for at kunne få dens værdi vist");
    }
  }

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

<form method="get" action="#" id="frmNyOption">
<fieldset>
<legend>Husk både tekst og værdi ved tilføjelse</legend>

  <label for="t1">Ny optiontekst</label>
  <input type="text" id="t1" name="otext" /><br />

  <label for="t2">Ny optionværdi</label>
  <input type="text" id="t2" name="oval" /><br />

  <label for="tilfoj">&nbsp;</label>
  <input type="button" id="tilfoj" onclick="addOption(document.forms['frmNyOption'].elements['otext'].value,
document.forms['frmNyOption'].elements['oval'].value,
document.forms['frmNyOption'].elements['test'])" value="Tilføj option" /><br /><br />

  <label for="t4">&nbsp;</label>
  <select id="t4" name="test" size="20">
    <option value="option værdi">option-tekst</option>
  </select>

  <label for="rem">&nbsp;</label>
  <input type="button" id="rem" onclick="removeOption(document.forms['frmNyOption'].elements['test'])" value="Fjern option" />
  &nbsp;&nbsp;<input type="button" onclick="showOption(document.forms['frmNyOption'].elements['test'])" value="Vis option" />
</fieldset>
</form>

Bemærk, at javascriptet i alle tre knapper skal skrives i en ubrudt linje uden mellemrum, selv om jeg i første tilfælge har 'klippet' det over i tre bidder!

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen august 2005
Hjemmesideskolen
Du er her: Forsiden - html - Tilføj / fjern option - vis værdi
Brugere lige nu: 1
Home Mail