Member Avatar for nonshatter

Hey guys,

I have this code which grabs categories from my category table of the database and populates the category drop-down box. I was hoping someone could tell me how I could populate the second drop-down box depending on what was selected in the first box.
E.g. If "Networking" is selected in the first box, then the second drop-down displays the subcategories of networking such as "wireless", "bluetooth" etc. Is it possible to do this in PHP alone? Or would I need to use javascript? How can I achieve this functionality?

Thanks

<?php 

	require ('db.php');
	
	$query = "SELECT c_id, c_category FROM category WHERE c_id BETWEEN '1' AND '11'";
	$result = mysql_query($query);

	$options= "";

	while ($row=mysql_fetch_array($result)) {

    		$ctgid = $row["c_id"];
    		$category = $row["c_category"];
    		$options.="<option value = \"$ctgid\">".$category."</option>";
	}

?> 
<html>
<head>
</head>
<body>
	<select name="category" size="10px">
		<option value="">--Select a Category--
		<?= $options ?>
	</select> 

	<select name="subcategory" size="10px">
		<option value="">--Select a Subcategory--
		<?= $options ?>
	</select>
</body>
</html>
  • 3 Contributors
  • 3 Replies
  • 149 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by prash21m
Member Avatar for nonshatter

Just to complicate things slightly more, my database structure is as follows:

c_id c_category c_parentid
1 Components NULL
2 Storage NULL
3 Monitors NULL
12 Processors 1
13 Motherboards 1
14 Memory 1
26 Internal Hard Drives 2
31 < 18" 3
32 19" > 20" 3


So, when i populate the first select box, I retrieve all the categories with c_parentid set as null. Then, depending on which category is selected I need to retrieve all the subcategories.
E.g:
If (Components is selected) {

SELECT c_id, c_category FROM category WHERE c_parentid = '1';

elseif (Storage is selected) {

SELECT c_id, c_category FROM category WHERE c_parentid = '2';

} elseif (etc..............)

I just need a way of determining what value has been selected by the user. Can someone please shed some light on this for me? Your advice is much appreciated!
nonshatter
x

Member Avatar for LethargicCoder

Here is a version using javascript to deal with the subcategory selection. I wouldn't use this if the list were large but works ok for smaller ones.

I threw an output at the end to output posted values of selections for demonstration. If your form action was to another page or 'SELF' like this, that's how you would obtain the values to work with.

If you don't go with this javascript version, you would need to either use ajax to call another page to load the values of subcategory based on category selection or you would have to just present and post category, then present subcategory on a separate page display.

NOTE: I had issues because of the "s in some of the DB records causing problems with the javascript. If you have any 's, you'll have to escape them.

<?php
$db = mysql_connect('localhost', 'username', 'password');
if (!$db) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db ("instance", $db);


	$query = "SELECT c_id, c_category, c_parentid FROM category";
	$result = mysql_query($query,$db);

	$options= "";
	$suboptions= "";
    $subcatid = 0;

	while ($row=mysql_fetch_array($result)) {

    		$ctgid = $row["c_id"];
    		$category = $row["c_category"];
    		$parentid = $row["c_parentid"];

    		if (isset($parentid)){
    			$suboptions.="subcat[$subcatid] = ['$ctgid','$category','$parentid'];\n";
    			$subcatid++;
    		} else {
    			$options.="<option value = \"$ctgid\">".$category."</option> ";
    		}
	}

?>
<html>
<head>
	<title>Multiselect Test page</title>
	<script type="text/javascript">

	function setSubCat()
	{
		var subcat = new Array();
		<?php echo $suboptions; ?>

		var category = document.getElementById("category");
		var c_id = category.options[category.selectedIndex].value;

		var x = document.getElementById("subcategory");
		var j=x.length-1;
		for (j;j>=0;j--)
		{
			x.remove(j);
		}

		var i=0;
		var limit=subcat.length;

		for (i=0;i<limit;i++)
		{
			var test = 0;

			if (subcat[i][2] == c_id)
			{
				var opt=document.createElement('option');
				opt.value = subcat[i][0];
				opt.text  = subcat[i][1];

				try
				  {
				  x.add(opt,null); // standards compliant
				  }
				catch(ex)
				  {
				  x.add(opt); // IE only
				  }
			}
		}
	}
	</script>
</head>
<body>
	<form method="post" action="">
	<label for="category">Category</label><br />
	<select name="category" id="category" size="5" onclick="setSubCat()">
		<?php echo $options ?>
	</select>
	<br />
	<label for="subcategory">Subcategory</label><br />
	<select name="subcategory" size="5" id="subcategory">
		<option value = "" DISABLED>-- Select a subcategory</option>
	</select>
	<br />
    <input type="submit" />
	</form>
	<br />
	<?php if(isset($_POST['category']))	{ ?>
		<p>Selected category id = <?php echo $_POST['category']; ?></p>
	<?php } if(isset($_POST['subcategory'])) { ?>
		<p>Selected subcategory id = <?php echo $_POST['subcategory']; ?></p>
	<?php } ?>
</body>
</html>
Member Avatar for prash21m

I need a help.

I am making a upload page where i want to use three drop down as -

dropbox 1 -> dropbox 2 -> dropbox 3

I want to call the values from sql to all three dropdowns and also want to upload content based on choosen options. For example i want to upload a game of nokia mobile phone that’s model no is c200 then -

the device list (computer, mobile etc) list should come in dropdown 1 and device company name(Nokia, Samsung etc) should come in dropdown 2 and device model list(c200, c101 etc) should come in dropdown 3

then choose the file and hit upload.

please provide me this. your help will be heartfull for me as i am not able to make this...[:(] PLEASE HELP ME OUT

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.