Två multiselect och flytta objekt mellan dem.

7 svar · 671 visningar · startad av UrMe 19 okt. 2007

UrMeMedlem sedan apr. 2001762 inlägg

Frågan19 okt. 2007 14:48#1

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.

Peter SMedlem sedan dec. 20025 483 inlägg

20 okt. 2007 19:17#2

Ett exempel hittar du här.

UrMeMedlem sedan apr. 2001762 inlägg

22 okt. 2007 07:04#3

Peter S skrev:

Ett exempel hittar du här.

Tackar! Ska kolla på den

UrMeMedlem sedan apr. 2001762 inlägg

23 okt. 2007 06:45#4

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.

Peter SMedlem sedan dec. 20025 483 inlägg

23 okt. 2007 16:08#5

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

UrMeMedlem sedan apr. 2001762 inlägg

24 okt. 2007 07:48#6

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.

Peter SMedlem sedan dec. 20025 483 inlägg

24 okt. 2007 17:08#7

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>

UrMeMedlem sedan apr. 2001762 inlägg

26 okt. 2007 07:53#8

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

Som jag tog bort

Tackar!*