02. marts 2006 - 15:36
Der er
6 kommentarer og
1 løsning
drop down med onchange
Hej Eksperten
Jeg har på en side lavet 4 drop down menuer:
(list1, list2, list3, list4 i alle kan man vælge 23cm, 33cm, 42cm)
kode kan ses her:
<form name="form1" method="post" action="test.asp">
<p>
<select name="list1">
<option value="2">23 cm</option>
<option value="3">33 cm</option>
<option value="4">42 dm</option>
</select>
</p><p>
<select name="list2">
<option value="2">23 cm</option>
<option value="3">33 cm</option>
<option value="4">42 dm</option>
</select>
</p><p>
<select name="list3">
<option value="2">23 cm</option>
<option value="3">33 cm</option>
<option value="4">42 dm</option>
</select>
</p><p>
<select name="list4">
<option value="2">23 cm</option>
<option value="3">33 cm</option>
<option value="4">42 dm</option>
</select>
</p>
</form>
Hvordan gør jeg så følgende..
- Hvis man i list1 vælger 42 cm
- Må man kun kunne vælge 42 eller 33 cm i list2
- Så igen alt efter hvad man vælger i list2, skal list3 tilpasse sig..
- 1.) Vælger man 42 cm i list2, må man i list3 vælger 42 eller 33 cm
- 2.) Vælger man 33 cm i list2, må man i list3 vælger 33 eller 23 cm
- 1.) Vælger man 33 cm i list3, må man i list4 vælge 33 eller 23 cm
- 2.) Vælger man 23 cm i list3, må man i list4 kun vælge 23 cm
Man kan sige dette er fælles:
list1 vil altid være >= list2, list2 vil altid være >= list3, list3 vil altid være >= list4
Dog må man ikke "springe" 2 nogle steder..
d.v.s, er:
list1 = 42, må man ikke vælge 23 i list2
eller
list2 = 42, må man ikke vælge 23 i list3
Jeg er bedste til asp, men for at løse dette skal vi vist have noget javascript..
Håber virkelig nogle kan hjælpe..
04. marts 2006 - 10:21
#2
Sådan her?
<script language="javascript">
function menuit(idname){
a4="<option value=\"4\">42 dm</option><option value=\"3\">33 cm</option>";
a3="<option value=\"3\">33 cm</option><option value=\"2\">23 cm</option>";
a2="<option value=\"2\">23 cm</option>";
for(mcx=idname;mcx<4;mcx++){
document.getElementById("list"+(mcx+1)).outerHTML="<select name=\"list"+(mcx+1)+"\"
id=\"list"+(mcx+1)+"\"
onChange=\"menuit("+(mcx+1)+")\">"+eval("a"+document.getElementById("list"+mcx).value)+"</select>
";}}
</script>
<form name="form1" method="post" action="test.asp">
<p>
<select name="list1" id="list1" onChange="menuit(1);">
<option value="4">42 dm</option>
<option value="3">33 cm</option>
<option value="2">23 cm</option>
</select>
</p><p>
<select name="list2" id="list2" onChange="menuit(2);">
<option value="4">42 dm</option>
<option value="3">33 cm</option>
<option value="2">23 cm</option>
</select>
</p><p>
<select name="list3" id="list3" onChange="menuit(3);">
<option value="4">42 dm</option>
<option value="3">33 cm</option>
<option value="2">23 cm</option>
</select>
</p><p>
<select name="list4" id="list4" onChange="menuit(4);">
<option value="4">42 dm</option>
<option value="3">33 cm</option>
<option value="2">23 cm</option>
</select>
</p>
</form>
04. marts 2006 - 10:23
#3
Scriptet blev adskilt :/
... Har lige samlet det (ind under head)
<script language="javascript">
function menuit(idname){
a4="<option value=\"4\">42 dm</option><option value=\"3\">33 cm</option>";
a3="<option value=\"3\">33 cm</option><option value=\"2\">23 cm</option>";
a2="<option value=\"2\">23 cm</option>";
for(mcx=idname;mcx<4;mcx++){document.getElementById("list"+(mcx+1)).outerHTML="<select name=\"list"+(mcx+1)+"\"id=\"list"+(mcx+1)+"\"onChange=\"menuit("+(mcx+1)+")\">"+eval("a"+document.getElementById("list"+mcx).value)+"</select>";}}
</script>
...samt form fra ovenstående
04. marts 2006 - 10:34
#4
Udvidet/forbedret scriptet lidt..
<script language="javascript">
function menuit(idname){
a4="<option value=\"4\">42 dm</option><option value=\"3\">33 cm</option>";
a3="<option value=\"3\">33 cm</option><option value=\"2\">23 cm</option>";
a2="<option value=\"2\">23 cm</option>";
for(mcx=idname;mcx<4;mcx++){
mcheck=document.getElementById("list"+(mcx)).value;
if((document.getElementById("list"+(mcx+1)).value>mcheck)||(document.getElementById("list"+(mcx+1)).value<(mcheck-1))){
document.getElementById("list"+(mcx+1)).outerHTML="<select name=\"list"+(mcx+1)+"\" id=\"list"+(mcx+1)+"\" onChange=\"menuit("+(mcx+1)+")\">"+eval("a"+document.getElementById("list"+mcx).value)+"</select>";}}}
</script>