login  Naam:   Wachtwoord: 
Registreer je!
 Forum

dropdown menu, met opties die afhangen van 1ste gekozen. (Opgelost)

Offline Roow - 19/09/2011 11:23 (laatste wijziging 19/09/2011 11:59)
Avatar van RoowLid Ik heb al wat rond gekeken op het forum, maar kon het niet echt vinden.

Wat ik nodig heb is als volgt:

een zoekformulier dat 3 opties biedt (allen met een klein dropdown menuutje). Deze opties komen uit de database.

Je begint bij de 1ste select, daar selecteer je bijvoorbeeld Groep 1. Bij de 2de select moeten dan alleen de opties te zien zijn die in de database staan waarbij staat dat ze bij groep 1 horen. Heb je bij de 2de select iets gekozen, dan moet bij de 3de select alleen de opties te zien zijn die in de database staan waarbij staat dat ze bij groep 2 horen etc.

Nu kwam ik er achter dat ik dit dus met ajax / javascript moet doen. Kan iemand mij hier een voorbeeld van geven. ben namelijk heel slecht in javascript!

alvast bedankt!

Update
Ik heb een script gevonden. Werkt super, alleen wil ik nu nog ervoor zorgen dat je op een knop kan drukken en dat het naar een bepaald formulier gaat. Ook moet dat al kunnen na slechts 1 optie te hebben geselecteerd! Nu begrijp ik niet echt hoe dat kan, dus hulp is gewenst !
Bedankt
Hier de codes:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php include 'select_list.php'; ?>
  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>Multiple Select Dropdown list with Ajax</title>
  7. <script src="ajax_select.js" type="text/javascript"></script>
  8. </head>
  9. <body>
  10.  
  11. <form action="" method="post">
  12. Select: <?php echo $re_html; ?>
  13. </form>
  14.  
  15. </body>
  16. </html>


select_lists.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. // Multiple select lists - www.coursesweb.net/ajax/
  3. if(!isset($_SESSION)) session_start();
  4.  
  5. // Here add your own data for connecting to MySQL database
  6. $server = '';
  7. $user = '';
  8. $pass = '';
  9. $dbase = '';
  10. // Here add the name of the table and columns that will be used for select lists, in their order
  11. // Add null for 'links' if you don`t want to display their data too
  12. $table = 'searchfreelancers';
  13. $ar_cols = array('optiegroep1', 'optiegroep2', 'optiegroep3', 'optiegroep4', 'links');
  14.  
  15. $preid = 'slo_';        // a prefix used for element's ID, in which Ajax will add <select>
  16. $col = $ar_cols[0];     // the variable used for the column that wil be selected
  17. $re_html = '';          // will store the returned html code
  18.  
  19. // if there is data sent via POST, with index 'col' and 'wval'
  20. if(isset($_POST['col']) && isset($_POST['wval'])) {
  21.   // set the $col that will be selected and the value for WHERE (delete tags and external spaces in $_POST)
  22.   $col = trim(strip_tags($_POST['col']));
  23.   $wval = "'".trim(strip_tags($_POST['wval']))."'";
  24. }
  25.  
  26. $key = array_search($col, $ar_cols);            // get the key associated with the value of $col in $ar_cols
  27. $wcol = $key===0 ? $col : $ar_cols[$key-1];     // gets the column for the WHERE clause
  28. $_SESSION['ar_cols'][$wcol] = isset($wval) ? $wval : $wcol;    // store in SESSION the column and its value for WHERE
  29.  
  30. // gets the next element in $ar_cols (needed in the onchange() function in <select> tag)
  31. $last_key = count($ar_cols)-1;
  32. $next_col = $key<$last_key ? $ar_cols[$key+1] : '';
  33.  
  34. $conn = new mysqli($server, $user, $pass, $dbase);     // connect to the MySQL database
  35.  
  36. if (mysqli_connect_errno()) { exit('Connect failed: '. mysqli_connect_error()); }     // check connection
  37.  
  38. // sets an array with data of the WHERE condition (column=value) for SELECT query
  39. for($i=1; $i<=$key; $i++) {
  40.   $ar_where[] = '`'.$ar_cols[$i-1].'`='.$_SESSION['ar_cols'][$ar_cols[$i-1]];
  41. }
  42.  
  43. // define a string with the WHERE condition, and then the SELECT query
  44. $where = isset($ar_where) ? ' WHERE '. implode($ar_where, ' AND ') : '';
  45. $sql = "SELECT DISTINCT `$col` FROM `$table`".$where;
  46.  
  47. $result = $conn->query($sql);       // perform the query and store the result
  48.  
  49. // if the $result contains at least one row
  50. if ($result->num_rows > 0) {
  51.   // sets the "onchange" event, which is added in <select> tag
  52.   $onchg = $next_col!==null ? " onchange=\"ajaxReq('$next_col', this.value);\"" : '';
  53.  
  54.   // sets the select tag list (and the first <option>), if it's not the last column
  55.   if($col!=$ar_cols[$last_key]) $re_html = $col. ': <select name="'. $col. '"'. $onchg. '><option>- - -</option>';
  56.  
  57.   while($row = $result->fetch_assoc()) {
  58.     // if its the last column, reurns its data, else, adds data in OPTION tags
  59.     if($col==$ar_cols[$last_key]) $re_html .= '<br/>'. $row[$col];
  60.     else $re_html .= '<option value="'. $row[$col]. '">'. $row[$col]. '</option>';
  61.   }
  62.  
  63.   if($col!=$ar_cols[$last_key]) $re_html .= '</select> ';        // ends the Select list
  64. }
  65. else { $re_html = '0 results'; }
  66.  
  67. $conn->close();
  68.  
  69. // if the selected column, $col, is the first column in $ar_cols
  70. if($col==$ar_cols[0]) {
  71.   // adds html code with SPAN (or DIV for last item) where Ajax will add the select dropdown lists
  72.   // with ID in each SPAN, according to the columns added in $ar_cols
  73.   for($i=1; $i<count($ar_cols); $i++) {
  74.     if($ar_cols[$i]===null) continue;
  75.     if($i==$last_key) $re_html .= '<div id="'. $preid.$ar_cols[$i]. '"> </div>';
  76.     else $re_html .= '<span id="'. $preid.$ar_cols[$i]. '"> </span>';
  77.   }
  78.  
  79.   // adds the columns in JS (used in removeLists() to remove the next displayed lists when makes other selects)
  80.   $re_html .= '<script type="text/javascript">var ar_cols = '.json_encode($ar_cols).'; var preid = "'. $preid. '";</script>';
  81. }
  82. else echo $re_html;
  83. ?>


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Multiple select lists - www.coursesweb.net/ajax/
  2.  
  3. // function used to remove the next lists already displayed when it chooses other options
  4. function removeLists(colid) {
  5.   var z = 0;
  6.   // removes data in elements with the id stored in the "ar_cols" variable
  7.   // starting with the element with the id value passed in colid
  8.   for(var i=1; i<ar_cols.length; i++) {
  9.     if(ar_cols[i]==null) continue;
  10.     if(ar_cols[i]==colid) z = 1;
  11.     if(z==1) document.getElementById(preid+ar_cols[i]).innerHTML = '';
  12.   }
  13. }
  14.  
  15. // create the XMLHttpRequest object, according browser
  16. function get_XmlHttp() {
  17.   // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
  18.   var xmlHttp = null;
  19.  
  20.   if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }     // for Forefox, IE7+, Opera, Safari
  21.   else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }      // IE5 or 6
  22.  
  23.   return xmlHttp;
  24. }
  25.  
  26. // sends data to a php file, via POST, and displays the received answer
  27. function ajaxReq(col, wval) {
  28.   removeLists(col);           // removes the already next selects displayed
  29.  
  30.   // if the value of wval is not '- - -' and '' (the first option)
  31.   if(wval!='- - -' && wval!='') {
  32.     var request =  get_XmlHttp();		      // call the function with the XMLHttpRequest instance
  33.     var php_file = 'select_list.php';     // path and name of the php file
  34.  
  35.     // create pairs index=value with data that must be sent to server
  36.     var  data_send = 'col='+col+'&wval='+wval;
  37.  
  38.     request.open("POST", php_file, true);			// set the request
  39.  
  40.     document.getElementById(preid+col).innerHTML = 'Loadding...';   // display a loading notification
  41.  
  42.     // adds a header to tell the PHP script to recognize the data as is sent via POST
  43.     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  44.     request.send(data_send);	      	// calls the send() method with data_send
  45.  
  46.     // Check request status
  47.     // If the response is received completely, will be added into the tag with id value of "col"
  48.     request.onreadystatechange = function() {
  49.       if (request.readyState==4) {
  50.         document.getElementById(preid+col).innerHTML = request.responseText;
  51.       }
  52.     }
  53.   }
  54. }

2 antwoorden

Gesponsorde links
Offline cyberninjah - 23/09/2011 09:31
Avatar van cyberninjah Lid Ik zal beginnen met deze geweldige <!doctype html> is te veranderen.

@probleem

Waar loop je precies vast helemaal geen idee waar je iets aanmoet passen?
Offline Roow - 29/09/2011 22:12
Avatar van Roow Lid Het is opgelost, heb het script laten maken!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.219s