option uit select halen en in een lijst zetten
Ik ben op zoek naar een manier om een option uit een lijst te halen en die in een ander lijstje te zetten. Bijvoorbeeld:
<select name='voorbeeld'>
<option value='1'>voorbeeld 1</option>
<option value='2'>voorbeeld 2</option>
<option value='3'>voorbeeld 3</option>
<option value='4'>voorbeeld 4</option>
</select>
<input type='button' onClick=''>
zodra ik op de button klik gaat de geselecteerde optie uit de lijst en word onder de lijst getoont, dus als ik voorbeeld 2 geselecteerd heb en op de button druk moet ik het volgende resultaat hebben
<select name='voorbeeld'>
<option value='voorbeeld 1'>voorbeeld 1</option>
<option value='voorbeeld 3'>voorbeeld 3</option>
<option value='voorbeeld 4'>voorbeeld 4</option>
</select>
<p name='entry[]'>voorbeeld 2</p>
<input type='button' onClick=''>
Weet iemand waar ik zo'n dergelijk tutorial kan vinden? Google heeft me tot nu toe weinig opgeleverd.
Gewijzigd op 31/05/2012 16:47:47 door Albert de Wit
want php is server side en je pagina ververst dus als je iets ergens anders weer wilt geven. dus javascript isde enige manier om dit lekker te laten lopen dacht ik.
{
document.getElementById("weergave-vak").innerHTML = selectveld.value;
var i;
for(i=selectveld.options.length-1;i>=0;i--)
{
if(selectveld.options.selected)
selectveld.remove(i);
}
}
</script>
<select name="name" onchange="stripWaarde(this)" >
<option value="voorbeeld 1">Voorbeeld 1</option>
<option value="voorbeeld 2">Voorbeeld 2</option>
<option value="voorbeeld 3">Voorbeeld 3</option>
<option value="voorbeeld 4">Voorbeeld 4</option>
</select>
<div id="weergave-vak"></div>
Bijna, alleen verwijderd hij ook andere opties. Er zit nog een foutje in mijn for-loop....
Gewijzigd op 31/05/2012 23:28:16 door Dave L
tellertje moet bij plus erbij en bij eraf naar i-- maar nu doet hij i-- tot hij niet meer verder kan waardoor hij alles weghaalt volgens mij.
{
document.getElementById("weergave-vak").innerHTML = selectveld.value;
var x=document.getElementById("selectveld");
x.remove(x.selectedIndex);
}
<select id="selectveld" >
<option value="voorbeeld 1">Voorbeeld 1</option>
<option value="voorbeeld 2">Voorbeeld 2</option>
<option value="voorbeeld 3">Voorbeeld 3</option>
<option value="voorbeeld 4">Voorbeeld 4</option>
</select>
<input type="button" value="Accepteer" onClick="stripWaarde()" >
<div id="weergave-vak"></div>
Gewijzigd op 31/05/2012 23:45:42 door Dave L
kolom1,kolom2,kolom3,etc,etc...
Als je dubbelklik op zo'n kolom gebruikt word die in het textarea gezet. Wat ik alleen wil is dat het ook uit het rijtje verdwijnt zodat zo'n keuze niet dubbel komt te staan.
Is dit wat jullie ook bedoelen hierboven? Ik volg het namelijk niet helemaal.
Quote:
Ik ben op zoek naar een manier om een option uit een lijst te halen en die in een ander lijstje te zetten
De laatste javascript functie + html die ik postte doet precies dat. De waarde kun je in ieder html element proppen op id.
Hier een werkend voorbeeld:
Selecteer & verwijder
Gewijzigd op 31/05/2012 23:57:30 door Dave L
Toevoeging op 01/06/2012 09:04:58:
Oh trouwens... bij
document.getElementById("weergave-vak").innerHTML = selectveld.value;
moet zijn
document.getElementById("weergave-vak").innerHTML += selectveld.value;
en achter elke value optie moet een <br> komen. Anders laat hij er maar 1 zien.
Toevoeging op 01/06/2012 09:49:54:
En wat als ik de option in de weergave-vak moet verwijderen? Is dat uberhaupt wel mogelijk?
Gewijzigd op 01/06/2012 09:49:20 door Albert de Wit
Verwijderen kan zeker. Toch niet zo moeilijk ?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function stripWaarde()
{
document.getElementById("weergave-vak").innerHTML += selectveld.value + '<input type='button' value='Accepteer'onClick="stripWaarde2(" + selectveld.value + ")" >';
var x=document.getElementById("selectveld");
x.remove(x.selectedIndex);
}
function stripWaarde2( str )
{
document.getElementById("selectveld").innerHTML += str;
var x=document.getElementById("weergave-vak");
x.remove(x.selectedIndex);
}
<select id="selectveld" >
<option value="voorbeeld 1">Voorbeeld 1</option>
<option value="voorbeeld 2">Voorbeeld 2</option>
<option value="voorbeeld 3">Voorbeeld 3</option>
<option value="voorbeeld 4">Voorbeeld 4</option>
</select>
<input type="button" value="Accepteer" onClick="stripWaarde()" >
<div id="weergave-vak"></div>
{
document.getElementById("weergave-vak").innerHTML += selectveld.value + '<input type='button' value='Accepteer'onClick="stripWaarde2(" + selectveld.value + ")" >';
var x=document.getElementById("selectveld");
x.remove(x.selectedIndex);
}
function stripWaarde2( str )
{
document.getElementById("selectveld").innerHTML += str;
var x=document.getElementById("weergave-vak");
x.remove(x.selectedIndex);
}
<select id="selectveld" >
<option value="voorbeeld 1">Voorbeeld 1</option>
<option value="voorbeeld 2">Voorbeeld 2</option>
<option value="voorbeeld 3">Voorbeeld 3</option>
<option value="voorbeeld 4">Voorbeeld 4</option>
</select>
<input type="button" value="Accepteer" onClick="stripWaarde()" >
<div id="weergave-vak"></div>
Kom ik in de buurt?
Toevoeging op 01/06/2012 14:08:00:
Ik heb het antwoord ondertussen gevonden na nog eens lang zoeken :D.
Hier is de code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script language="javascript" type="text/javascript">
function stripWaarde()
{
document.getElementById("weergavevak").innerHTML += "<option value='" + selectveld.value + "'>" + selectveld.value + "</option>";
var x=document.getElementById("selectveld");
x.remove(x.selectedIndex);
}
function stripWaarde2()
{
document.getElementById("selectveld").innerHTML += "<option value='" + weergavevak.value + "'>" + weergavevak.value + "</option>";
var y=document.getElementById("weergavevak");
y.remove(y.selectedIndex);
}
</script>
<select id="selectveld">
<option value="voorbeeld 1<br>">Voorbeeld 1</option>
<option value="voorbeeld 2<br>">Voorbeeld 2</option>
<option value="voorbeeld 3<br>">Voorbeeld 3</option>
<option value="voorbeeld 4<br>">Voorbeeld 4</option>
</select>
<input type="button" value="Accepteer" onClick="stripWaarde()" >
<br><br>
<select id="weergavevak" multiple >
</select>
<input type='button' value='Verwijder' onClick='stripWaarde2()'>
function stripWaarde()
{
document.getElementById("weergavevak").innerHTML += "<option value='" + selectveld.value + "'>" + selectveld.value + "</option>";
var x=document.getElementById("selectveld");
x.remove(x.selectedIndex);
}
function stripWaarde2()
{
document.getElementById("selectveld").innerHTML += "<option value='" + weergavevak.value + "'>" + weergavevak.value + "</option>";
var y=document.getElementById("weergavevak");
y.remove(y.selectedIndex);
}
</script>
<select id="selectveld">
<option value="voorbeeld 1<br>">Voorbeeld 1</option>
<option value="voorbeeld 2<br>">Voorbeeld 2</option>
<option value="voorbeeld 3<br>">Voorbeeld 3</option>
<option value="voorbeeld 4<br>">Voorbeeld 4</option>
</select>
<input type="button" value="Accepteer" onClick="stripWaarde()" >
<br><br>
<select id="weergavevak" multiple >
</select>
<input type='button' value='Verwijder' onClick='stripWaarde2()'>