Populate another select dropdown from database based on dropdown selection

by

I would just make put the variables in javascript with php and then use javascript functions.. no jquery or AJAX needed.

However you need to have a foreign key for subcategories no matter what.. ie – For every record in subcat table you need to give it a catid so for referencing…

<?php
  $db = new mysqli('localhost','user','password','dbname');//set your database handler
  $query = "SELECT id,cat FROM cat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("id" => $row['id'], "val" => $row['cat']);
  }

  $query = "SELECT id, catid, subcat FROM subcat";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
    <script type="text/javascript">
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 0; i < categories.length; i++){
          select.options[i] = new Option(categories[i].val,categories[i].id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
        }
      }
    </script>

  </head>

  <body onload='loadCategories()'>
    <select id='categoriesSelect'>
    </select>

    <select id='subcatsSelect'>
    </select>
  </body>
</html>

More Related Contents:

  1. the facebooks 'xyz is typing' feature? [closed]
  2. How to inject javascript code that uses php variables into php page
  3. Calling a php script at the end of a js script
  4. Call php function from JavaScript
  5. Send JavaScript variable to PHP variable [duplicate]
  6. How to get the jQuery $.ajax error response text?
  7. Download file through an ajax call php
  8. Send array with Ajax to PHP script
  9. How to avoid echoing character 65279 in php?
  10. Creating jQuery AJAX requests to a PHP function
  11. Resize iframe height according to content height in it
  12. Change DIV content using ajax, php and jQuery
  13. jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined
  14. How to load PHP file into DIV by jQuery?
  15. Passing Javascript Variable to PHP using Ajax
  16. Scaling a chat app – short polling vs. long polling (AJAX, PHP)
  17. Jquery – Uncaught TypeError: Cannot use ‘in’ operator to search for ‘324’ in
  18. Pass data from jQuery to PHP for an ajax post
  19. Saving WAV File Recorded in Chrome to Server
  20. Who Add “_” Single Underscore Query Parameter?
  21. Unserialize PHP Array in Javascript
  22. PHP Ajax Upload Progress Bar
  23. How to rotate image and save the image
  24. Cross Domain Ajax Request with JQuery/PHP
  25. show progressbar while loading pages using jquery ajax in single page website
  26. How to keep form values after post [duplicate]
  27. I want a pagination to my options page of wordpress plugin?
  28. Writing JSON object to .json file on server
  29. Detect Ajax calling URL
  30. How can you use php in a javascript function [duplicate]

Leave a Comment