| |
|
Dynamic populating the drop down list based on the selected value of first list |
How to dynamically narrow down (or limit) the items in a second drop down list based on the selected item from first selected item? For example if we have one list of countries in first drop down list and have list of states in the second list then once USA is selected from the country list then the second list should change to list only the states of USA. This script is required in many places and there are two way to handle such requirement. One is to get the full items list for both the drop down list to the client sides and manage by JavaScript and the other solution is submitting the form to the server on selection of first list and based on the selection get the element data for the second list. The first choice is advisable when we don’t have many records for the second list and we can download all the data for the second list to client machine and handle it by using client side JavaScript. We will discuss the second solution here as it is relevant to PHP MySQL section here and the first solution we will discuss in JavaScript drop down Tutorial section.
You can see similar solution of managing second drop down based on the first drop down in ASP using VBScript
Please note that the both the solutions require JavaScript client side support so it is better to check the JavaScript status for the client browser.
Two tables created in mysql database for populating the data in the drop down lists. One is category table and other one is subcategory table. Both tables are linked by the field cat_id. The data taken for this example is common data of fruits, games, vehicles, colors used as category and corresponding values are taken as subcategory.
The first table is populated in the first drop down list by taking directly from the table without any conditions in sql statement. In case of second drop down list the presence of variable having the value of category is checked and if the category number is present then the sql is changed to add one condition in where clause.
The variable to second list query is passed by submitting the form to itself when any value is selected in the first drop down list. We will be using the onchange event of the select element to submit the form.
We will write one function in JavaScript to handle the onchange event of the first drop down list box.
We will keep this function inside our head tag. Once the element in first list gets selected it will call the function and the function will add the selected item to the query string and will reload the page. So for the second drop down list the variable will be available.
<SCRIPT language=JavaScript>
function reload(form){
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='dd.php?cat=' + val ;
}
</script>
Please note that we have used dd.php as our file name. In your case change the file name. Now let us first prepare the sql for the first drop down list by getting the data from the category table.
$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order
by category");
With this query we can populate the first drop down list. This is a simple
solution but for the second drop down list we will check the presence of
selected item of first drop down list. If it is present then we will restrict
our records to that category only other wise we will collect all the records for
the second list. To know how the where sql query works, you can visit our sql
section. Here is the code to do this. Watch the if condition.
$cat=$_GET['cat']; //This line is added to take care if your global variable is off
if(isset($cat) and strlen($cat) > 0){
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where
cat_id=$cat order by subcategory");
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory
order by subcategory"); }
This way we can control the data of the second
list. Now the form part we will work. See how the onchange event is used (
onchange=\"reload(this.form)\" ) inside the select command. This will
execute the function reload and will submit the selected item to the page again
by using the query string. Here is the code.
echo "<form method=post name=f1 action=''>";
/// Add your form processing page address to action in above line. Example action=dd-check.php////
////////// Starting of first drop downlist /////////
echo "<select name='cat' onchange=\"reload(this.form)\"><option
value=''>Select one</option>";
while($noticia2 = mysql_fetch_array($quer2)) {
if($noticia2['cat_id']==@$cat){echo "<option selected
value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";}
else{echo "<option
value='$noticia2[cat_id]'>$noticia2[category]</option>";}
}
echo "</select>";
////////////////// This will end the first drop down list ///////////
////////// Starting of second drop downlist /////////
echo "<select name='subcat'><option value=''>Select
one</option>";
while($noticia = mysql_fetch_array($quer)) {
echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";
////////////////// This will end the
second drop down list ///////////
// add your other form fields here ////
echo "<input type=submit value=Submit>";
echo "</form>";
If you are facing any problem in using this code, please post it in php discussion forum with your error messages, bugs etc ..
Download the ZIP file here drop_down.zip
| |
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
|
|
