Nyeste it-job

Flere it-job

Tilføj og fjern valg fra liste (flytte værdier mellem 2 selectbokse)

af Jonas Astrup, HTML.dk
Sidst opdateret d. 1. maj 2001

Med dette script kan du lave en formular hvor man kan flytte værdier mellem 2 selectbokse. Metoden kan være nyttig i flere sammenhænge - f.eks. når man skal fjerne og tilføje brugere til brugergrupper.

Vis som eksempel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>Skærmopløsning og størrelse på browservinduet</title>
</head>
<body>

<script type="text/javascript">
<!-- Dette script og mange flere --> 
<!-- findes hos http://www.html.dk --> 
<!-- Start 

function deleteOption(object,index) {
    object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        if (fromObject.options[i].selected)
            addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        if (fromObject.options[i].selected)
            deleteOption(fromObject,i);
    }
}

function SelectAll(fromObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        fromObject.options[i].text,fromObject.options[i].selected = true;
    }
}

// Slut -->
</script>

<form method="post" action="">
<table>
<tr>
<td>Mine livretter<br>
<select multiple name="select1" size='8' style="width:200px">
<option value='1'>Indisk curry</option>
<option value='2'>Pasta med pesto</option>
<option value='3'>Humus</option>
</select>
</td>

<td> 
<input type='button' style="width:70px;" value='< Tilføj'
  onClick="copySelected(this.form.select2,this.form.select1)">
<br>
<input type='button' style="width:70px;" value='Fjern  >'
  onClick="copySelected(this.form.select1,this.form.select2)">
</td>

<td>Tilgængelige retter<br>
<select multiple name="select2" size='8' style="width:200px">
<option value='4'>Pasta med ketchup</option>
<option value='5'>Lasagne</option>
<option value='6'>Big mac</option>
<option value='7'>Whopper med cheese</option>
<option value='8'>Pizza</option>
<option value='9'>Shawarma</option>
</select>
</td>

</tr>
</table>
<p><input type="button" value="Send data" onClick="SelectAll(this.form.select1);submit()">
</form>

</body>
</html>

Vis som eksempel