Ok mp,
Here's a solution that works:
First create index.html as follows:
<!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>jQuery Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/* Setup the java handlers using Jquery Javascript lib */
$(document).ready(function()
{
$('#select_div').load("get_select.php?type=month");
$("#opt_months").click( function(){ $('#select_div').load("get_select.php?type=month"); } );
$("#opt_weeks").click( function(){ $('#select_div').load("get_select.php?type=week"); } );
});
</script>
</head>
<body>
<h1>jQuery Dynamic Select Switch Test</h1>
<!-- the following div is the target for loading the select list into -->
<div style="width: 100%; height: 100px; border: 1px solid black; padding: 4px" id="select_div">
<p>This is the div where your select list will live, the $('#select_div')... line above auto loads the default select in here using java script.</p>
<p>When viewing this page in the browser, you will not see these 2 paragaraphs as they will be replaced..</p>
</div>
<p>Please select drop down type:</p>
<input type="radio" name="opt_group" id="opt_months" value="0" checked="checked" />Months<br/>
<input type="radio" name="opt_group" id="opt_weeks" value="1" />Weeks
</body>
</html>
Then create get_select.php as follows:
<?php
function createMonths($id='month_select', $selected=null)
{
$months = array(
1=>'January',
2=>'February',
3=>'March',
4=>'April',
5=>'May',
6=>'June',
7=>'July',
8=>'August',
9=>'September',
10=>'October',
11=>'November',
12=>'December');
$selected = is_null($selected) ? date('m') : $selected;
$select = '<select name="'.$id.'" id="'.$id.'">'."\n";
foreach($months as $key=>$mon)
{
$select .= "<option value=\"$key\"";
$select .= ($key==$selected) ? ' selected="selected"' : '';
$select .= ">$mon</option>\n";
}
$select .= '</select>';
return $select;
}
function createWeek($id='week_select', $selected=null)
{
$quarter = array(
1=>'1st Week',
2=>'2nd Week',
3=>'3rd Week',
4=>'4th Week');
$selected = is_null($selected) ? date('m') : $selected;
$select = '<select name="'.$id.'" id="'.$id.'">'."\n";
foreach($quarter as $key=>$quar)
{
$select .= "<option value=\"$key\"";
$select .= ($key==$selected) ? ' selected="selected"' : '';
$select .= ">$quar</option>\n";
}
$select .= '</select>';
return $select;
}
@$type = $_GET['type'];
if(isset($type))
{
if($type == "month")
{
print "<p>Please select month:</p>";
print createmonths();
}
else
{
print "<p>Please select week:</p>";
print createweek();
}
}
else
{
print "<p>ERROR : No Select type was specified.</p>";
}
?>
Put both of these files into the same folder on the web server.
finaly download "jquery.js" from http://jquery.com/ , this is the javascript library i recomend for working with PHP.
Once you have Jquery then copy the jquery.js file into the same folder as the html & php files, and hey presto you can change the select on the fly.
How does it work?
Jquery makes it simple to add click handlers to your html elements in your HTML form. How you create these elements really doesnt matter.
When you click on a radio button, a click handler (as defined in the top of the html) is fired for the element clicked.
This handler then makes an ajax call to the file get_select.php in the background.
get_select takes one parameter, this is a GET parameter and it's used to determine which select list to produce, this output is then returned back to your html page and the exsisting html inside the DIV with the ID of 'select_div' is replaced.
Cheers
Shawty
. in accessing the variables.