login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Formulier keuze na keuze

Offline ElleRt - 03/09/2004 23:39
Avatar van ElleRtMySQL interesse ok... Stel iemand kan kiezen uit een aantal landen:

Kies hier uw locatie:
<OPTION>Nederland
<OPTION>Belgie
<OPTION>Frankrijk
<OPTION>Duitsland


En stel hij kist Nederland... Dan wil ik graag dat er onder weer een keuze komt waar gekozen kan worden uit de provincies.... En ga zo maar door...

Hoe doe ik dit???

4 antwoorden

Gesponsorde links
Offline Thomas - 04/09/2004 00:18
Avatar van Thomas Moderator Inspiratie

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>select galore</title>
  4. <script language="JavaScript" type="text/javascript">
  5. <!--
  6. selitems = new Array();
  7.  
  8. // de selectknop heeft geen items
  9. selitems[0] = null;
  10.  
  11. // België - heeft die eigenlijk wel provincies ?
  12. selitems[1] = new Array('val', 'txt');
  13.  
  14. // we doen net alsof Nederland geen provincies heeft
  15. selitems[2] = null;
  16.  
  17. // VS - staten
  18. selitems[3] = new Array('val', 'txt');
  19.  
  20. // sub-items voor België - eerste item is altijd een select-item, met lege value
  21. selitems[1]['val'] = new Array("","prov1", "prov2", "prov3");
  22. selitems[1]['txt'] = new Array("select:", "provincie 1", "provincie 2", "provincie 3");
  23.  
  24. // subitems voor de VS - eerste item is altijd een select-item, met lege value
  25. selitems[3]['val'] = new Array("", "st1", "st2", "st3", "st4");
  26. selitems[3]['txt'] = new Array("select:", "staat 1", "staat 2", "staat 3", "staat 4");
  27.  
  28. function change2(sel, frm, tgt) {
  29.   var opt = sel.options[sel.selectedIndex].value;
  30.  
  31.   // als het geselecteerde item extra waarden heeft
  32.   if(selitems[opt] != null) {
  33.     // geef aan hoeveel items de tweede selectbox heeft
  34.     document.frm.elements[tgt].options.length = selitems[opt]['val'].length;
  35.  
  36.     // vul de tweede selectbox met de waarden en texten
  37.     for(i=0; i < selitems[opt]['val'].length; i++) {
  38.       document.frm.elements[tgt].options[i].value = selitems[opt]['val'][i];
  39.       document.frm.elements[tgt].options[i].text = selitems[opt]['txt'][i];
  40.     }
  41.   }
  42.  
  43.   // is er een item geselecteerd die geen extra items heeft? Zoja - verberg de tweede selectbox
  44.   (selitems[opt] == null) ? hideLayer("opt") : showLayer("opt");
  45. }
  46.  
  47. // voor het tonen / verbergen van layers
  48. // http://www.chunkysoup.net/basic/js3step/js_3step.4.html
  49. function hideLayer(whichLayer) {
  50.   if (document.getElementById) {
  51.     // this is the way the standards work
  52.     document.getElementById(whichLayer).style.visibility = "hidden";
  53.   } else if (document.all) {
  54.     // this is the way old msie versions work
  55.     document.all[whichlayer].style.visibility = "hidden";
  56.   }  else if (document.layers) {
  57.     // this is the way nn4 works
  58.    document.layers[whichLayer].visibility = "hidden";
  59.   }
  60. }
  61.  
  62. function showLayer(whichLayer) {
  63.   if (document.getElementById) {
  64.     // this is the way the standards work
  65.     document.getElementById(whichLayer).style.visibility = "visible";
  66.   } else if (document.all) {
  67.     // this is the way old msie versions work
  68.     document.all[whichlayer].style.visibility = "visible";
  69.   } else if (document.layers) {
  70.     // this is the way nn4 works
  71.     document.layers[whichLayer].visibility = "visible";
  72.   }
  73. }
  74. -->
  75. </script>
  76. </head>
  77.  
  78. <body>
  79. <form name="frm" action="" method="post">
  80. <select name="sel1" onChange="change2(this,'frm','sel2');">
  81. <option value="0">select:</option>
  82. <option value="1">België</option>
  83. <option value="2">Nederland</option>
  84. <option value="3">VS</option>
  85. </select>
  86. <br>
  87. <!-- initieel is de tweede selectbox niet te zien -->
  88. <div id="opt" style="visibility: hidden;">
  89. <!-- de volgende onChange is debug -->
  90. <select name="sel2" onChange="alert(this.value);">
  91. <!-- je wilt dat er hier alleen een value wordt geselecteerd wanneer de eerste selectbox is veranderd -->
  92. </select>
  93. </div>
  94. </form>
  95. </body>
  96. </html>
Offline ikki007 - 04/09/2004 09:59
Avatar van ikki007 Gouden medailleGouden medaille

PHP ver gevorderde		 Je kan het ook zo maken dat je steeds naar de volgende pagina word doorverbonden...
Dit is wat lastiger, je zal meer pagina's moeten aanmaken dan... 
Offline ElleRt - 04/09/2004 19:57
Avatar van ElleRt MySQL interesse Uuuhm... tx voor de tips..

Maar t lukt natuurlijk weer niet.. 

Ik denk wel dat ik weet wat ik fout doe, maar niet hoe ik dit verhelp zeg maar.. 

Dit is nu mijn script.. alleen komt er nu dus helemaal geen 2de keuze bij... Enne, Is het met dit script wel mogelijk om er dan bv ook nog een derde keuze bij te maken????? Das wel mn bedoeling namelijk.. 



<html>
<head>
<title>select galore</title>
<script language="JavaScript" type="text/javascript">
<!--
selitems = new Array();

// de selectknop heeft geen items
selitems[0] = null;

// Afrika
selitems[1] = null;

// Australie
selitems[2] = null;

// Azie
selitems[3] = null;

// Europa
selitems[4] = new Array('val', 'txt');

// Noord-Amerika
selitems[5] = null;

// Zuid-Amerika
selitems[6] = null;


// sub-items voor Europa
selitems[4]['val'] = new Array("","Belgie", "Denemarken", "Duitsland", "Engeland, "Finland", "Frankrijk", "Griekenland", "Hongarije", "Ierland", "IJsland", "Italie", "Luxemburg, "Nederland", "Noorwegen", "Oostenrijk", "Polen", "Portugal", "Slowakije", "Spanje", "Tsjechie", "Turkije", "Wales", "Zweden", "Zwitserland", "Overige"");
selitems[4]['txt'] = new Array("select:","Belgie", "Denemarken", "Duitsland", "Engeland, "Finland", "Frankrijk", "Griekenland", "Hongarije", "Ierland", "IJsland", "Italie", "Luxemburg, "Nederland", "Noorwegen", "Oostenrijk", "Polen", "Portugal", "Slowakije", "Spanje", "Tsjechie", "Turkije", "Wales", "Zweden", "Zwitserland", "Overige"");



function change2(sel, frm, tgt) {
var opt = sel.options[sel.selectedIndex].value;

// als het geselecteerde item extra waarden heeft
if(selitems[opt] != null) {
// geef aan hoeveel items de tweede selectbox heeft
document.frm.elements[tgt].options.length = selitems[opt]['val'].length;

// vul de tweede selectbox met de waarden en texten
for(i=0; i < selitems[opt]['val'].length; i++) {
document.frm.elements[tgt].options[i].value = selitems[opt]['val'][i];
document.frm.elements[tgt].options[i].text = selitems[opt]['txt'][i];
}
}

// is er een item geselecteerd die geen extra items heeft? Zoja - verberg de tweede selectbox
(selitems[opt] == null) ? hideLayer("opt") : showLayer("opt");
}

// voor het tonen / verbergen van layers
// http://www.chun...tep.4.html
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
} else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
} else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}

function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
} else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
} else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
-->
</script>
</head>

<body>
<form name="frm" action="" method="post">
<select name="sel1" onChange="change2(this,'frm','sel2');">
<option value="0">select:</option>
<option value="1">Afrika</option>
<option value="2">Australie</option>
<option value="3">Azie</option>
<option value="4">Europa</option>
<option value="5">Noord-Amerika</option>
<option value="6">Zuid-Amerika</option>
</select>
<br>
<!-- initieel is de tweede selectbox niet te zien -->
<div id="opt" style="visibility: hidden;">
<!-- de volgende onChange is debug -->
<select name="sel2" onChange="alert(this.value);">
<!-- je wilt dat er hier alleen een value wordt geselecteerd wanneer de eerste selectbox is veranderd -->
</select>
</div>
</form>
</body>
</html>
Offline Legolas - 30/11/1999 00:00
Avatar van Legolas Onbekend Doe het anders met NavStudio 2005 van opencube.comrngratis;-)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.266s