Page 1 of 1

Multiple Drop Down?

Posted: Wed Mar 03, 2010 11:09 pm
by adilmarwat2004
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

Re: Multiple Drop Down?

Posted: Thu Mar 04, 2010 1:30 am
by davex
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

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>";
?>
page2.php

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 />";
 }
?>
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.

Re: Multiple Drop Down?

Posted: Thu Mar 04, 2010 1:56 am
by josh
This jquery plugin may be of use http://plugins.jquery.com/project/selectboxes

Re: Multiple Drop Down?

Posted: Thu Mar 04, 2010 4:32 am
by papa
I usually use onsubmit (javascript), but Josh's jquery plugin looked nice.

Re: Multiple Drop Down?

Posted: Thu Mar 04, 2010 6:45 am
by josh
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)

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>)
}
 
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...