I have table in mysql table name 'act' contains three fields
id, province, city
I have to create the two menu, 1st that contains Province data, When user click on the province item 2nd menu show the cities of the select province.
How it is possible,
please help.
Adil
Multiple Drop Down?
Moderator: General Moderators
Re: Multiple Drop Down?
Hi,
You can do this on two seperate page loads in PHP. There are other ways to do it on the client but that's more of a JavaScript question.
page1.php
page2.php
As I mentioned above if you want to do it on the same page i.e. as soon as the user clicks a province the next select is updated then you'll have to do it with JavaScript - either populating JavaScript arrays with everything or by doing an AJAX request back to the PHP script.
HTH,
Cheers,
Dave.
You can do this on two seperate page loads in PHP. There are other ways to do it on the client but that's more of a JavaScript question.
page1.php
Code: Select all
<?php
include_once("database.inc.php"); // assume this connects to MySQL
$query = "SELECT UNIQUE(province) AS prov FROM act";
$result = mysql_query($query);
echo "<FORM ACTION="page2.php" METHOD="POST">";
echo "<SELECT NAME=\"province\">";
while ($row = mysql_fetch_assoc($result))
{
echo "<OPTION VALUE=\"".$row['prov']."\">".$row['prov']."</OPTION>";
}
echo "</SELECT> ";
echo "<INPUT TYPE=\"submit\" VALUE=\"Next Step\">";
echo "</FORM>";
?>Code: Select all
<?php
if (!isset($_REQUEST['province']))
{
echo "Error! Province Not Set";
exit();
}
include_once("database.inc.php");
$query = "SELECT id,city FROM act WHERE province=\"".mysql_escape_string($_REQUEST['province'])."\"";
$result = mysql_query($query);
while ($row=mysql_fetch_assoc($result))
{
echo $row['id']." ".$row['city']."<br />";
}
?>HTH,
Cheers,
Dave.
Re: Multiple Drop Down?
This jquery plugin may be of use http://plugins.jquery.com/project/selectboxes
Re: Multiple Drop Down?
I usually use onsubmit (javascript), but Josh's jquery plugin looked nice.
Re: Multiple Drop Down?
disclaimer... not my plugin.
By the way with jquery you can change the contents of a select box like this too (without any additional plugins)
So in other words, you can just "grab a select" and write new <option> tags to it.
You could also google for "chained select boxes", "chained selects", "chained select box tutorial", etc... (the UI pattern is called chained selects)
Personally I made a Zend_Form element. I use chained selects with 1 line of code (because I made it work as a re-usable plugin). I can use it for any hierarchy
Geography..
USA > Florida > Palm Beach County
Subjects..
Teaching > Math > Algebra
Skills
Cooking > Satueing > Vegetables
Automotive ( I have open source implementation @ http://www.vehiclefits.com, probably a bit overkill for you though )
Honda > Civic > 2002
etc...
By the way with jquery you can change the contents of a select box like this too (without any additional plugins)
Code: Select all
// when change the first box
$('#selectOne').change( function() {
// get the html for the options to go into second box
var options = getOptionsFor( $(this).val() );
// and put them there
$('#selectTwo').html( options );
});
var getOptionsFor = function() {
// this would be up to you to implement (either call out with ajax, or output the values here with PHP)
// this function should return HTML options (<option>one</option><option>two</option>)
}
You could also google for "chained select boxes", "chained selects", "chained select box tutorial", etc... (the UI pattern is called chained selects)
Personally I made a Zend_Form element. I use chained selects with 1 line of code (because I made it work as a re-usable plugin). I can use it for any hierarchy
Geography..
USA > Florida > Palm Beach County
Subjects..
Teaching > Math > Algebra
Skills
Cooking > Satueing > Vegetables
Automotive ( I have open source implementation @ http://www.vehiclefits.com, probably a bit overkill for you though )
Honda > Civic > 2002
etc...