this issue.
I've got a page (dashboard.php) with 2 select boxes. The first select
box triggers the jquery script below, which populates the 2nd box with
values:
///////////////////////////////////
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#startstate").change(function(){
alert($(this).val());//debug
$.getJSON("admin/startcities.php",{id: $(this).val(), ajax: 'true'},
function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j
[i].optionDisplay + '</option>';
}
$("select#startcity").html(options);
})
})
})
</script>
///////////////////////////////////
I take the results of those 2 select elements and submit them to the
same page via GET, changing the url to something like this:
dashboard.php?startstate=AK&startcity=ALEKNAGIK
I then grab the startstate value and see if a startcity elements has
been selected. If it is, then I pre-populate the city names and add
SELECTED to the one that was selected in the 2nd box. Here is the code
that typically makes up the 2nd select element:
///////////////////////////////////
<select name="startcity" id="startcity" >
<?
if($_GET['startstate'] == TRUE){
echo "<option value=\"\">ALL CITIES</option>";
$q = "SELECT DISTINCT cityname FROM areas WHERE stateabbr = '".$_GET
['startstate']."'";
$result = $database->query($q);
while($row = mysql_fetch_array($result)){
echo "<option value='".$row['cityname']."'";
if($row['cityname'] == $_GET['startcity']){
echo " SELECTED ";
}
echo ">";
echo $row['cityname'];
echo "</option>";
}
}
?>
</select>
///////////////////////////////////
Ok, if you're still reading, the issue I have is that when I change
the #startstate select box, and the #startcity has been prepopulated,
Firefox ignores the change event. IE however registers it. I put an
alert for debugging right after the change event to make sure. I would
appreciate it if anyone has any ideas what I might have missed.
Thanks in advance!
No comments:
Post a Comment