Dynamic Dependable Drop Down

Hi folks, i’m trying to build a little search box for a car site. My database table is quite simple “make”,“model”,“price”

So basically i want drop down one pre-propogated with all makes then on select drop 2 will show the model.
Drop 3 & 4 will be optional filters of Min Price & Maximum Price … So i have found some good information and examples on around and i have drop downs 1&2 working 99% perfectly.

My only problem is that drop down 2 is invisible until a selection has been made in drop down 1. Can anybody help me to make it visible at all times (just for styling purpose) obviously it will be disabled until previous selection has been made.

Also i’m not really sure how to achieve drops 3&4 … i have put in all the price ranges, but i don’t know how to make it function to compare the Price column from my database.

Any help would be great … my code so far is below.

search.php

[code]

<?php include('func.php'); ?> <?php> $query = "SELECT COUNT(*) AS total FROM vehicles"; $result = mysql_query($query); $values = mysql_fetch_assoc($result); $num_rows = $values['total']; ?>
<?php echo $num_rows; ?>  Vehicles in stock
Manufacturer:
<select name="drop_1" id="drop_1">

  <option value="" selected="selected" disabled="disabled">Make</option>
  
  <?php getTierOne(); ?>

</select> 

<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
 <span id="result_1">style="display: none;"</span>

		        </fieldset>
		        				
			<fieldset>

				<label>Min Price:</label>
				<select>
					
			                <option value="0">No min</option>
			                <option value="1">£500</option>
					<option value="2">£1,000</option>
					<option value="3">£2,000</option>
					<option value="4">£3,000</option>
					<option value="5">£4,000</option>
					<option value="6">£5,000</option>
					<option value="7">£6,000</option>
					<option value="8">£7,000</option>
					<option value="9">£8,000</option>
					<option value="10">£9,000</option>
					<option value="11">£10,000</option>
					<option value="12">£12,500</option>
					<option value="13">£15,000</option>
					<option value="14">£17,500</option>
					<option value="15">£20,000</option>
					<option value="16">£25,000</option>
					<option value="17">£30,000</option>
					<option value="18">£35,000</option>
					<option value="19">£40,000</option>
					<option value="16">£45,000</option>
					<option value="17">£50,000</option>
					<option value="18">£75,000</option>
					<option value="19">£100,000</option>
					<option value="20">£250,000</option>
					<option value="21">£500,000</option>
					
				</select>
			</fieldset>
			
			<fieldset>
				<label>Max Price:</label>
				<select>
					<option value="0">No max</option>
			                <option value="1">£500</option>
					<option value="2">£1,000</option>
					<option value="3">£2,000</option>
					<option value="4">£3,000</option>
					<option value="5">£4,000</option>
					<option value="6">£5,000</option>
					<option value="7">£6,000</option>
					<option value="8">£7,000</option>
					<option value="9">£8,000</option>
					<option value="10">£9,000</option>
					<option value="11">£10,000</option>
					<option value="12">£12,500</option>
					<option value="13">£15,000</option>
					<option value="14">£17,500</option>
					<option value="15">£20,000</option>
					<option value="16">£25,000</option>
					<option value="17">£30,000</option>
					<option value="18">£35,000</option>
					<option value="19">£40,000</option>
					<option value="16">£45,000</option>
					<option value="17">£50,000</option>
					<option value="18">£75,000</option>
					<option value="19">£100,000</option>
					<option value="20">£250,000</option>
					<option value="21">£500,000</option>
					<option value="22">£1,000,000</option>
				</select>
			</fieldset>
		

			<div class="clear"></div>
			<button id="submitSearch" class="submit-search" type="submit">Search</button>
			
		</form><!--/ .form-panel-->[/code]

func.php

[code]<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query(“SELECT DISTINCT make FROM vehicles”)
or die(mysql_error());

  while($tier = mysql_fetch_array( $result )) 

	{
	   echo '<option value="'.$tier['make'].'">'.$tier['make'].'</option>';
	}

}

//**************************************
// First selection results //
//**************************************
if($_GET[‘func’] == “drop_1” && isset($_GET[‘func’])) {
drop_1($_GET[‘drop_var’]);
}

function drop_1($drop_var)
{
include_once(‘db.php’);
$result = mysql_query(“SELECT * FROM vehicles WHERE make=’$drop_var’”)
or die(mysql_error());

echo '<fieldset>
      <label>Model:</label>
      <select name="tier_two" id="tier_two">
      <option value=" " disabled="disabled" selected="selected">Choose one</option>
      <fieldset>';

	   while($drop_2 = mysql_fetch_array( $result )) 
		{
		  echo '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
		}

echo '</select> ';

}
?>[/code]

To get the second box to show initially, change the .hide in this part of the jquery to .show

$(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){

Thanks for your reply, but unfortunately that’s not correct. wait_1 refers to the loading graphic which appears. The function which controls the second drop down is result_1 but changing it to .show … doesn’t change anything … so i am a bit stumped !!

Sponsor our Newsletter | Privacy Policy | Terms of Service