Verwijder een bepaalde optie uit select bij klik.
De bedoeling is dat de optie met value "weg" verdwijnt wanneer ik op de knop klik.
Hoe de functie nu is ingesteld verwijderd hij de nummer 1 uit de array, dus in dit geval Pear, daarna Banana enz.
Ik heb veel op internet gezocht maar niets wijzer geworden. Ook geprobeerd om x.remove("weg"); te gebruiken (leek mij het meest logisch) maar werkt niet.
Waarom heb ik dit nodig?
Een broodjes bestelsysteem. Standaard staat de select van "Wanneer bezorgen" op "Zo snel mogelijk".
Wanneer de klant op een radio button "Afhalen" klikt moet de functie in werking gaan die de optie "Zo snel mogelijk" laat verdwijnen uit de drop down box.
Kan iemand mij hier uitleg over geven?
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<script>
function removeOption(ctrl)
{
var x=document.getElementById("mySelect");
x.remove(1);
}
</script>
</head>
<body>
<form>
<select id="mySelect" value="this.value">
<option value="blijf1">Apple</option>
<option value="weg">Pear</option>
<option value="blijf2">Banana</option>
<option value="blijf3">Orange</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
</body>
</html>
<head>
<script>
function removeOption(ctrl)
{
var x=document.getElementById("mySelect");
x.remove(1);
}
</script>
</head>
<body>
<form>
<select id="mySelect" value="this.value">
<option value="blijf1">Apple</option>
<option value="weg">Pear</option>
<option value="blijf2">Banana</option>
<option value="blijf3">Orange</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
</body>
</html>
Graag in het vervolg bij code, [code] [/code] tags gebruiken.[/modedit]
Gewijzigd op 10/04/2013 13:51:10 door Bas IJzelendoorn
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
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Voorbeeld in HTML5</title>
<style>
#Foo option[disabled] {
display: none;
}
</style>
</head>
<body>
<form action="">
<select id="Foo" value="">
<option value="blijf1">Apple</option>
<option id="optPear" value="weg">Pear</option>
<option value="blijf2">Banana</option>
<option value="blijf3">Orange</option>
</select>
<input type="button" onclick="document.getElementById('optPear').disabled='disabled';" value="Remove option">
</form>
</body>
</html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Voorbeeld in HTML5</title>
<style>
#Foo option[disabled] {
display: none;
}
</style>
</head>
<body>
<form action="">
<select id="Foo" value="">
<option value="blijf1">Apple</option>
<option id="optPear" value="weg">Pear</option>
<option value="blijf2">Banana</option>
<option value="blijf3">Orange</option>
</select>
<input type="button" onclick="document.getElementById('optPear').disabled='disabled';" value="Remove option">
</form>
</body>
</html>
Ward van der Put op 10/04/2013 12:30:55:
Je kunt een option lang niet altijd verwijderen, maar vaak wel verbergen. Dan krijg je bijvoorbeeld dit, met ingesprongen de relevante 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
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
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Voorbeeld in HTML5</title>
<style>
#Foo option[disabled] {
display: none;
}
</style>
</head>
<body>
<form action="">
<select id="Foo" value="">
<option value="blijf1">Apple</option>
<option id="optPear" value="weg">Pear</option>
<option value="blijf2">Banana</option>
<option value="blijf3">Orange</option>
</select>
<input type="button" onclick="document.getElementById('optPear').disabled='disabled';" value="Remove option">
</form>
</body>
</html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Voorbeeld in HTML5</title>
<style>
#Foo option[disabled] {
display: none;
}
</style>
</head>
<body>
<form action="">
<select id="Foo" value="">
<option value="blijf1">Apple</option>
<option id="optPear" value="weg">Pear</option>
<option value="blijf2">Banana</option>
<option value="blijf3">Orange</option>
</select>
<input type="button" onclick="document.getElementById('optPear').disabled='disabled';" value="Remove option">
</form>
</body>
</html>
Hallo Ward,
Bedankt voor je bericht.
Als ik jou script uitvoer werkt het inderdaad wel. Echter als ik hem bijv. op de iphone open dan blijft de optie er in staan, alleen dan disabled. Opzich niets mis mee, maar naar mijn idee moet het anders kunnen.
Als je onderstaand script uitvoert doet het precies zoals ik wil. Alleen verwijderd hij hem alsnog bij een soort array id. Dus om te zorgen dat de klanten niet nog een optie verwijderen laat ik het scriptje eerst tellen of de option al niet verwijderd is.
Echter vind ik het te omslachtig, dit moet toch gewoon uitgevoerd kunnen worden door Remove() een opdracht te geven een option te removen a.d.h.v. de value? :-S
Zoals hieronder moet het (aan de buitenkant) worden:
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
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
<script>
function removeOption(ctrl)
{
var x=document.getElementById("mySelect");
if(mySelect.options.length == 4)
{
x.remove(0);
}
}
</script>
</head>
<body>
<form>
<select id="mySelect" value="this.value">
<option value="weg">Zo spoedig mogelijk</option>
<option value="blijf1">Vandaag</option>
<option value="blijf2">Morgen</option>
<option value="blijf3">Overmorgen</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
function removeOption(ctrl)
{
var x=document.getElementById("mySelect");
if(mySelect.options.length == 4)
{
x.remove(0);
}
}
</script>
</head>
<body>
<form>
<select id="mySelect" value="this.value">
<option value="weg">Zo spoedig mogelijk</option>
<option value="blijf1">Vandaag</option>
<option value="blijf2">Morgen</option>
<option value="blijf3">Overmorgen</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
Gewijzigd op 10/04/2013 13:08:12 door Koen Hollander
