Jump to content

dependent dropdowns

Codeman0013

By Codeman0013
in PHP

 Share

Recommended Posts

Codeman0013 Newbie

Codeman0013

Posted
Posted

Hello, i'm working on a website and i have 4 dropdown's that are on a page and i want to make them dependent. Right now i have them set to pull from the database but i want it set to based on what they select on number 1 it populates number 2 and number 2 populates 3 and 3 does 4 and so on. Can someone take a look at my code and help me to achieve this as i have never done it before and would appreciate any help at all..

<?php require_once('Connections/conn_dj.php'); ?><?phpif (!function_exists("GetSQLValueString")) {function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);  switch ($theType) {	case "text":	  $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";	  break;		case "long":	case "int":	  $theValue = ($theValue != "") ? intval($theValue) : "NULL";	  break;	case "double":	  $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";	  break;	case "date":	  $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";	  break;	case "defined":	  $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;	  break;  }  return $theValue;}}mysql_select_db($database_conn_dj, $conn_dj);$query_rs_industry = "SELECT * FROM tbl_industry ORDER BY industry_name ASC";$rs_industry = mysql_query($query_rs_industry, $conn_dj) or die(mysql_error());$row_rs_industry = mysql_fetch_assoc($rs_industry);$totalRows_rs_industry = mysql_num_rows($rs_industry);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_productcategory = "SELECT * FROM tbl_productcat  ORDER BY tbl_productcat.productCat_name";$rs_productcategory = mysql_query($query_rs_productcategory, $conn_dj) or die(mysql_error());$row_rs_productcategory = mysql_fetch_assoc($rs_productcategory);$totalRows_rs_productcategory = mysql_num_rows($rs_productcategory);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_product = "SELECT * FROM tbl_products ORDER BY tbl_products.products_name";$rs_product = mysql_query($query_rs_product, $conn_dj) or die(mysql_error());$row_rs_product = mysql_fetch_assoc($rs_product);$totalRows_rs_product = mysql_num_rows($rs_product);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_outsidena = "SELECT * FROM intl_countries ORDER BY intl_countries.name";$rs_outsidena = mysql_query($query_rs_outsidena, $conn_dj) or die(mysql_error());$row_rs_outsidena = mysql_fetch_assoc($rs_outsidena);$totalRows_rs_outsidena = mysql_num_rows($rs_outsidena);mysql_select_db($database_conn_dj, $conn_dj);$query_rs_state = "SELECT * FROM tbl_states ORDER BY tbl_states.`state`";$rs_state = mysql_query($query_rs_state, $conn_dj) or die(mysql_error());$row_rs_state = mysql_fetch_assoc($rs_state);$totalRows_rs_state = mysql_num_rows($rs_state);?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DICKEY-john Corporation | Distributors</title><link href="_lib/sub.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="keywords" content="Distributor, Sales, Purchase, U.S., International" /><meta name="description" content="Enter your zip or postal code to find the DICKEY-john distributor nearest you." /></head><body><div id="black"> </div><div id="siteContainer">	<?php include("_inc/topNav.inc"); ?>	<div id="headerContainer">Distributors</div>	<div class="divContainer"><div class="horizDiv"></div><img src="/_img/divEnd.png" alt="div" height="16" width="4" align="right" /></div>	<div id="contentContainer">		<div id="fullContainer">			<div id="stretchCrumbs">				<a href="/index.php">Home</a>				» <a class="high" href="/distributors/">Distributors</a>			</div>			<h1>Distributors</h1>			<p>Search for DICKEY-john distributers by specifying any combonation of the<br />			following classifications: industry, product category, product, and state.</p>			<br />						<br />													<h2>North America</h2>						  <table class="setTbl listTbl" width="90%" cellpadding="0" cellspacing="0" border="0">				<tr><td>Industry:</td><td>				<select name="industry" id="center" onchange="java script:document.centerform.submit()">				  <option value="">Select an Industry...</option>				  <?php do { ?>				  <option value="<?php echo $row_rs_industry['industry_name']; ?>"><?php echo $row_rs_industry['industry_name']; ?></option>				  				  <?php } while ($row_rs_industry = mysql_fetch_assoc($rs_industry)); ?></td></tr>				</select>				<tr><td width="125">Product Category: </td>  <td>				<select name="prodcat" id="center" onchange="java script:document.centerform.submit()">				  <option value="">Select a product category...</option>				  <?php do { ?>				  <option value="<?php echo $row_rs_productcategory['productCat_name']; ?>"><?php echo $row_rs_productcategory['productCat_name']; ?></option>				  				  <?php } while ($row_rs_productcategory = mysql_fetch_assoc($rs_productcategory)); ?></td></tr>				</select>				<tr>				<td>Product:</td><td>				<select name="prod" id="center" onchange="java script:document.centerform.submit()">				  <option value="">Select a product...</option>				  <?php do { ?>				  <option value="<?php echo $row_rs_product['products_name']; ?>"><?php echo $row_rs_product['products_name']; ?></option>				  <?php } while ($row_rs_product = mysql_fetch_assoc($rs_product)); ?>				  </td></tr>				</select>				<td>State:</td>				  <td> <select name="state" id="center" onchange="java script:document.centerform.submit()">				  <option value="">Select a state...</option>				  <?php do { ?>				  <option value="<?php echo $row_rs_state['state']; ?>"><?php echo $row_rs_state['state']; ?></option>				  <?php } while ($row_rs_state = mysql_fetch_assoc($rs_state)); ?>				  </td></tr>				</select></td>						  </tr>				<tr><td> </td><td><input class="PythonButton" type="submit" value="Find" name="{Button_Name}"></td></tr>		  </table>			</form>						<br />		 <h2>Outside North America </h2>	<table class="setTbl listTbl" width="90%" cellpadding="0" cellspacing="0" border="0">		 <tr><td>  <select name="outna" id="center" onchange="java script:document.centerform.submit()">				  <option value="">Select a country...</option>				  <?php do { ?>				  <option value="<?php echo $row_rs_ousidena['name']; ?>"><?php echo $row_rs_outsidena['name']; ?></option>				  <?php } while ($row_rs_outsidena = mysql_fetch_assoc($rs_outsidena)); ?>				  </td></tr>		  </select></td> 			</tr></td></tr>		  </table>		</form>		</div>	</div><?php include("_inc/footer.inc"); ?></body></html><?phpmysql_free_result($rs_industry);mysql_free_result($rs_productcategory);mysql_free_result($rs_product);mysql_free_result($rs_outsidena);mysql_free_result($rs_state);?>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

If you want this to be purely client-side (instead of resubmitting the page whenever they change a dropdown), you will need to write out all of the javascript code that will change the dropdowns. You'll probably need one javascript function for each of the three dropdowns that changes another one, and each javascript function will need to read which value you chose, and populate the next list with options. You can search for the code on how to add and remove options from a dropdown, that is pretty common. But you will need to write out all of your database data in the javascript functions, inside a javascript array or something so that the function can go through the array and add the various items to the list.So, in other words, you need to use PHP to write out Javascript code that will clear out the dropdown and add the new items. The difficult part will be structuring your data in the Javascript functions so that it works like you want. While developing, take a look at your Javascript code and use a Javascript console like Opera or Firefox has to track down Javascript errors.

Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
If you want this to be purely client-side (instead of resubmitting the page whenever they change a dropdown), you will need to write out all of the javascript code that will change the dropdowns. You'll probably need one javascript function for each of the three dropdowns that changes another one, and each javascript function will need to read which value you chose, and populate the next list with options. You can search for the code on how to add and remove options from a dropdown, that is pretty common. But you will need to write out all of your database data in the javascript functions, inside a javascript array or something so that the function can go through the array and add the various items to the list.So, in other words, you need to use PHP to write out Javascript code that will clear out the dropdown and add the new items. The difficult part will be structuring your data in the Javascript functions so that it works like you want. While developing, take a look at your Javascript code and use a Javascript console like Opera or Firefox has to track down Javascript errors.
wow this is way over my head nice of the freaking people to assign this to an intern who has no idea how to do it would you have anywhere i could look to learn how to do this?
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Well, there are a lot of pieces to this. The first one is removing all the options from a select list. Whenever you make a change, you will want to remove all the options, then add new ones. This is how you remove options:http://www.w3schools.com/htmldom/met_select_remove.aspYou will use the size property of the select list to remove all of them:

for (i = document.getElementById("dropdown1").size - 1; i >= 0; i--)  document.getElementById("dropdown1").remove(i);

That should remove everything. The next thing to do is add all the new options. Here is a page about adding and removing options:http://www.mredkj.com/tutorials/tutorial005.htmlThis is the code they use:

	var elOptNew = document.createElement('option');	elOptNew.text = 'Insert' + num;	elOptNew.value = 'insert' + num;	var elOptOld = elSel.options[elSel.selectedIndex];  	try {	  elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE	}	catch(ex) {	  elSel.add(elOptNew, elSel.selectedIndex); // IE only	}

Once you can remove and add the options, the next part is figuring out which options you need to add. So, you need to check what the value of the previous dropdown list is, and use an IF statement to add the appropriate new options. This is where the PHP will come into play, you will write out each IF statement with PHP to add the appropriate options based on the value that was selected in the other list.

Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
Well, there are a lot of pieces to this. The first one is removing all the options from a select list. Whenever you make a change, you will want to remove all the options, then add new ones. This is how you remove options:http://www.w3schools.com/htmldom/met_select_remove.aspYou will use the size property of the select list to remove all of them:
for (i = document.getElementById("dropdown1").size - 1; i >= 0; i--)  document.getElementById("dropdown1").remove(i);

That should remove everything. The next thing to do is add all the new options. Here is a page about adding and removing options:http://www.mredkj.com/tutorials/tutorial005.htmlThis is the code they use:

	var elOptNew = document.createElement('option');	elOptNew.text = 'Insert' + num;	elOptNew.value = 'insert' + num;	var elOptOld = elSel.options[elSel.selectedIndex];  	try {	  elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE	}	catch(ex) {	  elSel.add(elOptNew, elSel.selectedIndex); // IE only	}

Once you can remove and add the options, the next part is figuring out which options you need to add. So, you need to check what the value of the previous dropdown list is, and use an IF statement to add the appropriate new options. This is where the PHP will come into play, you will write out each IF statement with PHP to add the appropriate options based on the value that was selected in the other list.

wow i'm totally lost and this is way over my head still thanks for trying to help i'm totally lost and they just keep getting on me to do this thats y i'm not a webprogrammer i dont have a clue how to do this...
Link to comment
Share on other sites
Cronthenoob Member

Cronthenoob

Posted
Posted
Thank you chronthenoob that helps me a lot i have it hardcoded now but is it possible to make this into a database driven list?
It is very much possible to make them database driven. I'm sure you can just add some database interaction instead it being hardcoded. You posted in the php forum so im assuming you are using php and mysql for the database. I can help you out if you are having problems with the queries. It shouldnt be too difficult :)Good luck!
Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
It is very much possible to make them database driven. I'm sure you can just add some database interaction instead it being hardcoded. You posted in the php forum so im assuming you are using php and mysql for the database. I can help you out if you are having problems with the queries. It shouldnt be too difficult :)Good luck!
Yes you are exactly right in all of your assumptions so far i have been making it hardcoded but it needs to be driven based on the database could you help me do this? I have no idea where to start i have 2 seperate pages one that pulls all the items and one thats hard coded just what should be in each one can you help me take the ones i just made using your code and have them pull based on the database please
Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
How many levels are there going to be? 3 levels?Also, do you have the database created already?
yes the database is created and there is going to be approximately 4 dropdowns one for the industry which is populated at the beginning and after they select the industry it moves to the product category which then will populate the product menu which then populates the state menu(will have all states no matter what) and then the user will click the find button and it will then list all the matching results...
Link to comment
Share on other sites
Cronthenoob Member

Cronthenoob

Posted
Posted

Ok try something like this.You'll obviously change the names to what you have in your database and add an action to the form. You can probably find a simple javascript to submit each feild automatically when the user selects something and so it remembers what they selected in each dropdown.But here is the general logic I could come up with. It should be a decent start if you know php :)P.S. I havnt tested it yet.

<html><body><form><select name="industry"><option value="">---Industry---</option><?PHP	$query="SELECT * from dropdown1";	$results = mysql_query($query);	while ($e=mysql_fetch_array($results)) {	 echo "<option value='".$e[one_value]."'>".$e[one_value]."</option>";	}?></select><select name="product_cat"<?PHPif ($_REQUEST['industry'] != "") {echo ">";}else { echo "disabled>";}  $query="SELECT two_value from dropdown2 where dropdown_one_id=$_REQUEST[dropdown1]";  $results = mysql_query($query);   while ($e=mysql_fetch_array($results)) {	echo "option value='".$e[two_value]."'>".$e[two_value]."</option>";   }?></form></body></html>

Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
Ok try something like this.You'll obviously change the names to what you have in your database and add an action to the form. You can probably find a simple javascript to submit each feild automatically when the user selects something and so it remembers what they selected in each dropdown.But here is the general logic I could come up with. It should be a decent start if you know php :)P.S. I havnt tested it yet.
<html><body><form><select name="industry"><option value="">---Industry---</option><?PHP	$query="SELECT * from dropdown1";	$results = mysql_query($query);	while ($e=mysql_fetch_array($results)) {	 echo "<option value='".$e[one_value]."'>".$e[one_value]."</option>";	}?></select><select name="product_cat"<?PHPif ($_REQUEST['industry'] != "") {echo ">";}else { echo "disabled>";}  $query="SELECT two_value from dropdown2 where dropdown_one_id=$_REQUEST[dropdown1]";  $results = mysql_query($query);   while ($e=mysql_fetch_array($results)) {	echo "option value='".$e[two_value]."'>".$e[two_value]."</option>";   }?></form></body></html>

Ok i'm having problems now when i put my include in for the navigation it kills my js and it does not work but as soon as i take it off it works again i'm going to attach both for you to look at maybe someone can figure out what the heck is going on..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DICKEY-john Corporation | Distributors</title><link href="_lib/sub.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="keywords" content="Distributor, Sales, Purchase, U.S., International" /><meta name="description" content="Enter your zip or postal code to find the DICKEY-john distributor nearest you." /><script language="javascript" src="chainedselects.js"></script><script language="javascript" src="exampleconfig.js"></script></head><body onload="initListGroup('vehicles', document.forms[0].make, document.forms[0].type, document.forms[0].model)"><div id="black"> </div><div id="siteContainer">	<?php include("_inc/topNav.inc"); ?><div id="headerContainer">Distributors</div>	<div class="divContainer"><div class="horizDiv"></div><img src="/_img/divEnd.png" alt="div" height="16" width="4" align="right" /></div>	<div id="contentContainer">		<div id="fullContainer">			<div id="stretchCrumbs">				<a href="/index.php">Home</a>				» <a class="high" href="/distributors/">Distributors</a>			</div>			<h1>Distributors</h1>			<p>Search for DICKEY-john distributers by specifying any combonation of the<br />			following classifications: industry, product category, product, and state.</p>			<br />				<h2>North America</h2><table class="setTbl listTbl" width="90%" cellpadding="0" cellspacing="0" border="0"><tr><td><form><table align="center"><tr><td>Industry:</td><td><select name="make"></select></td></tr><tr><td>Product Category: </td><td><select name="type"></select></td></tr><tr><td>Product:</td><td><select name="model"></select></td></tr><td><input type="button" value="Reset" onclick="resetListGroup('vehicles')"></tr></table></form></body></html>

here is the include file..

	<script>		function clearText(thefield){		if (thefield.defaultValue==thefield.value)		thefield.value = ""		} 	</script><div id="menuContainer">		<form id="search" method="GET" action="/search/index.php">			<input id="searchBox" type="text" name="zoom_query" value="Search" onFocus="clearText(this)"/>			<input type="hidden" name="zoom_and" value="1" />			<input id="searchSubmit" type="image" src="/_img/arrow_search.jpg" alt="site search arrow" />		</form>				<div id="topTidbits"><!--ZOOMSTOP-->		<a href="/index.php">Home</a> | <a href="/aboutus/">About Us</a> | <a href="/pressroom/">Pressroom</a> | <a href="/shows/">Trade Shows</a> | <a href="/employment/">Employment</a> | <!--<a href="/pressroom/catalogs/">Catalogs</a> |--> <a href="/sitemap/">Site Map</a><!--ZOOMRESTART--></div>		<table id="navTbl" border="0" cellpadding="0" cellspacing="0">			<tr><!--ZOOMSTOP-->			<td class="nav"><a href="/products/">PRODUCTS</a></td>			<td class="nav"><a href="/distributors/">DISTRIBUTORS</a></td>			<td class="nav"><a href="/full-circle-manufacturing/">FULL CIRCLE MANUFACTURING</a></td>			<td class="nav navEnd"><a href="/contact/">CONTACT US</a></td>			<!--ZOOMRESTART-->			</tr>		</table>		</div>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

So you include the topNav.inc, and then the code in chainedselects or exampleconfig stops working? It looks like some divs are not being closed, so if the javascript is trying to access certain divs, it might be confused as to where they end. It looks like the siteContainer, contentContainer, and fullContainer divs are not being closed.

Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
So you include the topNav.inc, and then the code in chainedselects or exampleconfig stops working? It looks like some divs are not being closed, so if the javascript is trying to access certain divs, it might be confused as to where they end. It looks like the siteContainer, contentContainer, and fullContainer divs are not being closed.
I figured it out but now i have to get the database working thats going to be the hard part. The js works but nothign else is up and going yet...
Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted 
<form id="search" method="GET" action="/search/index.php">			<input id="searchBox" type="text" name="zoom_query" value="Search" onFocus="clearText(this)"/>			<input type="hidden" name="zoom_and" value="1" />			<input id="searchSubmit" type="image" src="/_img/arrow_search.jpg" alt="site search arrow" />		</form>

Something in that line is what is causing my problem when i remove it from the page it works again!

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

There's nothing wrong with that code itself. With all of the IDs and the hidden element, it looks like javascript is accessing the elements, so there's probably some problem where the javascript either gets an unexpected value, or is missing a value. But that code is syntactically correct.

Link to comment
Share on other sites
Codeman0013 Newbie

Codeman0013

Posted
  • Author
Posted
There's nothing wrong with that code itself. With all of the IDs and the hidden element, it looks like javascript is accessing the elements, so there's probably some problem where the javascript either gets an unexpected value, or is missing a value. But that code is syntactically correct.
i dont know what else to do with this statement its annoying the ###### out of me it should work but as soon as i put that code in there it kills it. I have to move on to making this database dependent but i have no idea what i'm doing this is above my head but i have no help on it grrr
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...