jQuery Dynamic Combobox


/ Published in: jQuery
Save to your folder(s)

How to dynamically generate combo box contents depending on the selection made by a user on earlier combo box.


Copy this code and paste it in your HTML
  1. HTML
  2. ====
  3.  
  4. <select id="first-choice">
  5. <option selected value="base">Please Select</option>
  6. <option value="beverages">Beverages</option>
  7. <option value="snacks">Snacks</option>
  8. </select>
  9.  
  10. <br />
  11.  
  12. <select id="second-choice">
  13. <option>Please choose from above</option>
  14. </select>
  15.  
  16.  
  17. JS
  18. ==
  19.  
  20. $("#first-choice").change(function() {
  21. $("#second-choice").load("getter.php?choice=" + $("#first-choice").val());
  22. });
  23.  
  24.  
  25.  
  26. PHP
  27. ===
  28.  
  29. <?php
  30.  
  31. $username = "username";
  32. $password = "password";
  33. $hostname = "localhost";
  34.  
  35. $dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
  36. $selected = mysql_select_db("dropdownvalues", $dbhandle) or die("Could not select examples");
  37. $choice = mysql_real_escape_string($_GET['choice']);
  38.  
  39. $query = "SELECT * FROM dd_vals WHERE category='$choice'";
  40.  
  41. $result = mysql_query($query);
  42.  
  43. while ($row = mysql_fetch_array($result)) {
  44. echo "<option>" . $row{'dd_val'} . "</option>";
  45. }
  46. ?>

URL: http://css-tricks.com/dynamic-dropdowns/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.