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..
Annonceindlæg fra Infor
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>