Två multiselect och flytta objekt mellan dem.

Jag har två multiselect som ser ut ungefär så här:

<select MULTIPLE size="5" class="multisel1" name="groups_ava" id="groups_ava">
<option value="34">Val1</option>
<option value="12">Val2</option>
<option value="110">Val3</option>
</select>

<select MULTIPLE size="5" class="multisel1" name="groups_sel" id="groups_sel">
<option value="99">Val4</option>
<option value="123">Val5</option>
<option value="321">Val6</option>
</select>

<input type="submit" id="btnAddGroup" name="btnAddGroup" class="submit2" onclick="javascript:move(1);" value="&raquo;&raquo;">
<input type="submit" id="btnDelGroup" name="btnDelGroup" class="submit2" onclick="javascript:move(2);" value="&laquo;&laquo;">

Det jag vill göra är att t.ex flytta över Val1 till den andra selecten, och sedan när man trycker "Send" eller nåt skicka arrayen med de sakerna som ligger i "groups_sel".

Hur ska jag bära mig åt med javascriptet, är helt still i huvudet :((
Jag laddar in sakerna i "groups_ava" från en databas men det ska väl inte spela någon roll.

Ett exempel hittar du här.

Peter S skrev:

Ett exempel hittar du här.

Tackar! Ska kolla på den

Skriver en följdfråga här, det är så att jag fick till det precis som jag ville ha det.
Men när man fyllt i formuläret och klickar skicka så vill jag att alla saker i "box2" ska flyttas tillbaka till "box1", det fungerar så där bra... den flyttar ett par av sakerna men inte alla.

Så här ser just koden ut för att flytta tillbaka sakerna:

		if(document.getElementById('cleargroups').checked == true) {
			var dest = document.getElementById('box1');
			var src = document.getElementById('box2');
			var newOption;
			for (var i=0; i < src.options.length; i++) {
				newOption = new Option(src.options[i].text, src.options[i].value);
				dest.options[dest.options.length] = newOption;
				src.options[i] = null;
			}
		}

Varför flyttas inte alla objekten? :(
Om jag bara har 1 så flyttas den, om jag har 2 så flyttas 1 om jag har 3 så flyttas 2.

Testa att ta bort src.options = null; och lägga src.options.length = 0; efter loopen.

Peter S skrev:

Testa att ta bort src.options = null; och lägga src.options.length = 0; efter loopen.

Funkade inte riktigt, den rensar allt nu men flyttar bara den första av någon anledning.

För mig fungerar det:

function f(){
if(document.getElementById('cleargroups').checked == true) { 
            var dest = document.getElementById('box1'); 
            var src = document.getElementById('box2'); 
            var newOption; 
            for (var i=0; i < src.options.length; i++) { 
                newOption = new Option(src.options[i].text, src.options[i].value); 
                dest.options[dest.options.length] = newOption; 
            } 
	    src.options.length = 0;
        } 

}
</script>

<form>
 <select id=box1></select>
 <select id=box2>
  <option>1
  <option>2
  <option>3
 </select>
 <input type=checkbox id=cleargroups>
</form>
<a href="javascript:void f()">Move!</a>

Nu verkar det fungera, jag hade kvar denna rad:
src.options *= null;

Som jag tog bort

Tackar!*