Advanced Search

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.

Expand | Embed | Plain Text

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.