Ik ben momenteel bezig met een schoolproject en hierbij moet er een mogelijkheid zijn om leden tot een groep toe te voegen. Momenteel haal ik alle leden via een query uit de wp_users tabel van wordpress en laat ik deze in een select list zien. Nu wil ik graag, wanneer je de naam geselecteerd hebt en op voeg toe drukt, dat er in de lege selectlist ernaast de geselecteerde naam tevoorschijn komt. Zodat ik deze later met een query weer kan toevoegen als nieuwe groep in de database met de bijbehorende leden.

In de bijlage staat een verduidelijking.
Is dit mogelijk dmv van ajax of gewoon via javascript?

Alvast bedankt.

jQuery append() gebruiken of een plugin om selectlists te vullen. Overigens ook via javascript te doen hoor. Dit is nog geen ajax

Dankjewel met deze functie is het gelukt!
Is het dan ook mogelijk om met javascript de huidige waarde van de bovenste select list in die append te zetten, zodat hij deze toevoegt aan de 2e select list?

via jQuery krijg je dan iets als $('#select-id2').append('<option value="' + $('#select-id option:first').val() + '">' + $('#select-id option:first').html() );

Als ik dat in deze code gebruikt, voegt ie een extra item toe:

Code:

function exampleAddOption1() {
	$('#example').append('<option value="mathijs">Mathijs</option>');
}
function deleteOption() {
	 $('#example').append('<option value="' + $('#example option:first').val() + '">' + $('#example option:first').html() );
}

<select name="groepsleden">
<?php
while($row = mysql_fetch_assoc($result)) { ?>
	<option value="<?php echo $row['ID']; ?>"><?php echo $row['display_name']; ?></option>
<?php } ?>
</select>
<input type="submit" onclick="exampleAddOption1()" value="Voeg toe" name="toevoegen" />
<input type="submit" onclick="deleteOption()" value="Verwijder" name="delete" />
  
<label for="nieuwegroep">Nieuwe groep</label>
<select id="example" size="6" name="nieuwegroep">
	<option value="mathijs">Mathijs</option>
</select>

Je voegt nu toch ook iets toe (zoals je al ziet aan de code). Je vraag om de ene waarde bovenaan de andere te plaatsen, die voorbeeld code gaf ik je nu. Wat jij doet is onderaan de #select de eerste waarde uit #select zelf plaatsen.

Om te verwijderen zul je met IDs moeten werken.

Oeps dat is mijn fout, ik was even in de war met de verwijder functie die ik nu ook werkend heb gekregen.
Ik heb het idee een beetje aangepast, ik heb nu 2 select velden en je kunt dan van de ene select box een waarde naar de andere zetten en weer terug. Alleen het terug switchen wil niet helemaal met deze code, want hij zet er dan een null waarde terug.

Code:

function exampleAddOption1() {
	$('#example').append('<option value="' + $('#groepsleden option:selected').val() + '">' + $('#groepsleden option:selected').html() );
	$('#groepsleden').append('<option value="' + $('#groepsleden option:selected').remove());

}
function deleteOption() {
	 $('#example').append('<option value="' + $('#example option:selected').remove());
	 $('#groepsleden').append('<option value="' + $('#example option:selected').val() + '">' + $('#example option:selected').html() );
	 
}

Aanvullend bericht:
Kan iemand mij helpen?
En is er ook een mogelijkheid om de items uit de onderste select list in een database te zetten?