login  Naam:   Wachtwoord: 
Registreer je!
 Forum

dropdownlistbox aanpassen

Offline yolk - 26/05/2005 11:51
Avatar van yolkHTML interesse Volgens mij moet het volgende probleem met javascript worden opgelost.
Ik heb een dropdownlistbox. Als ik hier een keuze maak, moet in de volgende dropdownlistbox een lijst met keuzes komen.
Weet iemand hoe dit moet. Of weet iemand hoe het heet of waar ik een tutorial kan vinden, want met google en hotscripts krijg ik teveel (onbruikbare) resultaten.

8 antwoorden

Gesponsorde links
Offline Thomas - 26/05/2005 12:40
Avatar van Thomas Moderator Moet dit puur met JavaScript ?

Het kan wel, ik heb dit namelijk al eens gemaakt met 3 selectboxen (selectbox 1 beinvloed de keuzemogelijkheden van selectbox 2 en selectebox 2 beinvloed de keuzemogelijkheden van selectbox 3) maar het is wel een omslachtig werkje. Als je de beschikking hebt over een scriptingtaal kun je e.e.a. eenvoudiger maken, maar als je alleen html/javascript enzo hebt zul je een oplossing moeten maken in JavaScript - dit kun je dan het beste doen met arrays.
Offline Metalhead - 26/05/2005 12:44
Avatar van Metalhead HTML gevorderde Dit is een voorbeeld hoe je het in JavaScript zou kunnen doen. Maar het lijkt me aardig eenvoudiger te doen in PHP of iets dergelijks...

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <HTML>
  2. <HEAD>
  3. 	<TITLE>- dummy -</TITLE>
  4. 	<SCRIPT type="text/javascript" language="JavaScript">
  5. 		function doFill()
  6. 		{		
  7. 			if (document.frm.sel.value=="dummy-a")
  8. 			{
  9. 				document.write ("<HTML><HEAD><TITLE>- dummy -</TITLE></HEAD><BODY>");
  10. 				document.write ("<SELECT><OPTION>Blabla A1</OPTION>");
  11. 				document.write ("<OPTION>Blabla A2</OPTION></SELECT>");
  12. 			}
  13. 			else if (document.frm.sel.value=="dummy-b")
  14. 			{
  15. 				document.write ("<HTML><HEAD><TITLE>- dummy -</TITLE></HEAD><BODY>");
  16. 				document.write ("<SELECT><OPTION>Blabla B1</OPTION>");
  17. 				document.write ("<OPTION>Blabla B2</OPTION></SELECT>");
  18. 			}
  19. 			else if (document.frm.sel.value=="dummy-c")
  20. 			{
  21. 				document.write ("<HTML><HEAD><TITLE>- dummy -</TITLE></HEAD><BODY>");
  22. 				document.write ("<SELECT><OPTION>Blabla C1</OPTION>");
  23. 				document.write ("<OPTION>Blabla C2</OPTION></SELECT>");
  24. 			}
  25. 			document.write ("</BODY></HTML>");
  26. 		}
  27. 	</SCRIPT>
  28. </HEAD>
  29. <BODY>
  30. 	<FORM name="frm">
  31. 		<SELECT name="sel" onchange="doFill()">
  32. 			<OPTION>dummy-a</OPTION>
  33. 			<OPTION>dummy-b</OPTION>
  34. 			<OPTION>dummy-c</OPTION>
  35. 		</SELECT>
  36. 	</FORM>
  37. </BODY>
  38. </HTML>
Offline DaOxx - 26/05/2005 12:46
Avatar van DaOxx PHP beginner Hoe wil je dat in vredesnaam doen met php? Het kan wel maar dan moet je eerst een andere pagina laden, dit lijkt me niet echt wat hij bedoeld. Hij moet meteen veranderen, zoals ik al eerder zei ben ff wat aan het typen hij is bijna klaar.
Offline Metalhead - 26/05/2005 12:51 (laatste wijziging 26/05/2005 12:51)
Avatar van Metalhead HTML gevorderde @DaOxx; daarvoor heb je dan weer de javascript functie submit.
Dan submit hij bij een wijziging het formulier en daardoor ga je de volgende dropdownbox vullen.

Dit is hoe ik het zelf meestal doe.
Offline Thomas - 26/05/2005 12:53
Avatar van Thomas Moderator Maareh... <html>-tags in een optie veld ? 
Het gaat toch puur om het vullen van de selectboxen, dan ben je toch alleen met "labels" (de text die je ziet in een option-veld) en values ?
Offline Metalhead - 26/05/2005 12:55
Avatar van Metalhead HTML gevorderde Misschien is er wel een betere manier, maar ik kon zo snel niet bedenken hoe je met javascript de labels van een option kunt veranderen, vandaar dat ik de hele pagina opnieuw genereer....
Offline Thomas - 26/05/2005 13:01 (laatste wijziging 26/05/2005 13:02)
Avatar van Thomas Moderator Je kan options toevoegen aan een selectbox op de volgende manier:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. // reset het aantal items in een selectbox
  2. document.forms['form_naam'].elements['selectbox_naam'].length = 0;
  3.  
  4. // voeg een optie toe - bepaal de eerste vrije lokatie
  5. // (dit kan handig zijn als je in een for-lus meerdere options wilt toevoegen)
  6.  
  7. var pos = document.forms['form_naam'].elements['selectbox_naam'].length;
  8.  
  9. // voeg de optie toe op deze eerste vrije plaats
  10. document.forms['form_naam'].elements['selectbox_naam'].options[pos] = new Option("De tekst die in het dropdown menu te zien is");
  11.  
  12. // je wilt dat ding meestal ook een value geven
  13. document.forms['form_naam'].elements['selectbox_naam'].options[pos].value = "een_value";


En zo kun je dus je selectboxen bouwen... whiieeeee.
Offline DaOxx - 26/05/2005 13:04 (laatste wijziging 26/05/2005 13:20)
Avatar van DaOxx PHP beginner Zoets, hij werkt nog niet helemaal lekker nog ff debuggen: maar kun je vast kijken:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. /* De functie of course :) */
  3. function changeDropDown()
  4. {
  5. 	/* De geselecteerde waarde ophalen */
  6. 	sFirstDropDown = dcoument.getElementByid("firstDropDown").value;
  7.  
  8. 	/* Bekijken of de waarde niet leeg is */
  9. 	if (sFirstDropDown != "")
  10. 	{
  11. 		/* De string met de getallen ophalen die er nodig zijn voor de tweede drop-down */
  12. 		sSecondList = F[sFirstDropDown];
  13.  
  14. 		/* Voor de tweede dropdown menu een array maken */
  15. 		aSecondDropDown = sSecondList.split(",")
  16.  
  17. 		/* De laatste option ophalen van het tweede drop-down menu */
  18. 		iLastSecondDropDown = document.getElementById("secondDropDown").options.length-1;
  19.  
  20. 		/* Tweede drop-down leeg gooien */
  21. 		for (i=iLastSecondDropDown; i > -1; i--)
  22. 		{
  23. 			document.getElementById("secondDropDown).options[i] = NULL;
  24. 		}
  25.  
  26. 		/* iCount op 0 zetten, die de options index bepaald. */
  27. 		iCount=0;
  28.  
  29. 		/* Door de array heen lopen */
  30. 		for (i=0; i < aSecondDropDown; i++)
  31. 		{
  32. 			/* De betreffende id ophalen */
  33. 			sSecondId = aSecondDropDown[i];
  34.  
  35. 			/* Bekijken of de id niet leeg is */
  36. 			if (S[sSecondId] != "")
  37. 			{
  38. 				/* De betreffende naam koppelen aan sSecondName */
  39. 				sSecondName = S[sSecondId];
  40.  
  41. 				/* Dropdown vullen */
  42. 				document.getElementById("secondDropDown").options[iCount] = new option(sSecondName, sSecondId);
  43.  
  44. 				/* options index verhogen met 1 */
  45. 				iCount++;
  46. 			}
  47. 		}
  48.  
  49. 		/* selected index op 0 zetten */
  50. 		document.getElementById("secondDropDown").selectedIndex = 0;
  51. 	}
  52.  
  53. 	return true;
  54. }
  55.  
  56. F = new array(1); S = new array(1); F[1] = "1,2,3,4"; F[2] = "5,6"; S[1] = "Breaburn"; S[2] = "Elstar"; S[3] = "Gala"; S[4] = "Jonagold"; S[5] = "Handperen"; S[6] = "Stoofperen";
  57. </script>
  58.  
  59. <select id="firstDropDown" name="fruit" onChange="javascript:changeDropDown();">
  60. 	<option value="1">Appels</option>
  61. 	<option value="2">Peren</option>
  62. </select>
  63.  
  64. <select id="secondDropDown" name="types">
  65.  
  66. </select>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.206s