I believe that the problem is within the javascript and not with php. You are not passing the value to the select menu's value=" " field.
SO, if you cange this line of your javascript from this: tar.options = new Option(selectedArray,'',true,true);
to THIS: tar.options = new Option(selectedArray,selectedArray,true,true);
You should get the results that you would like.
For example:
<?php
// if the form has not been submitted, show form:
if(!isset($_POST['submit'])){
?>
<script language="javascript">
<!-- Begin function to fill out the region sel box
var ukArray = new Array('Select region', 'East and East Anglia', 'East Midlands');
var canadaArray = new Array('Select region', 'Alberta', 'British Columbia');
var usArray = new Array('Select region', 'Alabama', 'Alaska');
function populateRegion(obj,tar) {
var selectedArray = window[obj.options[obj.selectedIndex].value+'Array'];
tar=obj.form[tar]; tar.options.length=0
if (selectedArray){
for (i=0;i<selectedArray.length;i++) {
tar.options[i] = new Option(selectedArray[i],selectedArray[i],true,true);
}
}
else {
tar.options[0] = new Option('Not Applicable','',true,true);
} tar.selectedIndex=0
}
// End -->
</script>
<form name="globe" action="" method="post">
<select name="country" onChange="populateRegion(this,'region')" style="width: 250px;">
<option value=""> - - - - -</option>
<option value="us">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<br />
<select name="region" style="width: 250px;">
<option value=""> - - - - </option>
</select>
<br />
<input type="submit" name="submit" value="submit" />
</form>
<?php
}
// else, form submitted. process form:
else {
foreach($_POST as $var => $val) {
if (!empty($val)){
$$var = trim($val);
$_SESSION[$var] = $val;
// display values:
echo $var . ' equals ' . $val . '<br />';
}
else {
echo 'You did not fill out the form completely. Please go back.';
exit;
}
}
}
?>
PS, don't forget canada
:-)
