AJAX Generated Select Won't Redirect
So, basically I have this select / drop down menu that I use AJAX to retrieve and create, though when an option is selected (so onChange) I want it to redirect!
Though, this still isn't working, I don't get any errors thrown when trying, and tried to do alert() debug methods yet the alerts don't get called.
jquery
$("#schoolMenu").change(function() {
option = $("#schoolMenu option:selected").text();
alert(option);
if(option != "- Please Select -") {
window.location = "http://www.itmustbecollege.com/pics/pics-from-"+$("#schoolMenu option:selected").val();
}
});
This is what is used to call the AJAX
// // Populate Schools //
$("#state").change(function() {
option = $("#state option:selected").text();
if($(this).attr("class") == "menu") {
if(option != "- Please Select -") {
$.ajax({
type: "GET",
url: "/includes/functions.php",
data: "f=school&p="+option+"&m=yes",
success: function(msg) {
$("#fSchool").html("<p style=\"margin-left: 20px;\">Select School:</p>"+ msg);
$("#fSchool").show();
$("#school").focus();
}
});
}
else {
$("#fSchool").html("");
$("#fSchool").hide();
}
}
else {
if(option != "- Please Select -") {
$.ajax({
type: "GET",
url: "/includes/functions.php",
data: "f=school&p="+option,
success: function(msg) {
$("#fSchool").html(msg);
$("#fSchool").show();
$("#school").focus();
}
});
}
else {
$("#fSchool").html("");
$("#fSchool").hide();
}
}
});
It loads perfectly, if you look at http://www.itmustbecollege.com/quotes/ on that bar where you can do "sort by" of Popular | Newest | Category | School
if you hover over school a dropdown comes up, select any country and another one appears, though when that is changed nothing happens.
here is the PHP for that second drop down
// Get College List
function getCollege($state, $m = "no", $l = "no") {
// Displays Schools
if($m == "yes") {
$options = '<select id="schoolMenu" name="school"><option value="select" selected="selected">- Please Select -</option>';
}
else if($l == "yes" || $l == "yes2") {
$options = '';
}
else {
$options = '<select name="school"><option value="select" selected="selected">- Please Select -</option>';
}
$listArray = split("\|\\\\", $list);
for($i=0; $i < count($listArray); $i++) {
if($m == "yes") {
$options .= '<option value="'. trim(titleReplace($listArray[$i])) .'">'. trim($listArray[$i]) .'</option>';
}
else if($l == "yes") {
$options .= '<li><a href="/quotes/quotes-from-'. titleReplace($listArray[$i]) .'" title="'. trim($listArray[$i]) .' Quotes">'. trim($listArray[$i]) .'</a></li>';
}
else if($l == "yes2") {
$options .= '<li><a href="/pics/pics-from-'. titleReplace($listArray[$i]) .'" title="'. trim($listArray[$i]) .' Pictures">'. trim($listArray[$i]) .'</a></li>';
}
else {
$options .= '<option value="'. trim($listArray[$i]) .'">'. trim($listArray[$i]) .'</开发者_StackOverflow中文版option>';
}
}
echo $options .='</select>';
return false;
}
any help would be great!
EDIT: Also, the way I have those drop downs coming for the menus is a bit weird and when you hover over any other "sort by" link they disappear, this is a problem with the "sort by school" because the first select box shows the list up, and if you go and select a school then somehow float over another link it disappears, any help on how to delay that or fix that minor problem?
It is because the #schoolMenu
element isn't present when the page loads, so you .change()
handler doesn't get assigned.
You can assign it when it arrives.
var fSchool = $("#fSchool").html("<p style=\"margin-left: 20px;\">Select School:</p>"+ msg);
fSchool.find("#schoolMenu").change(function() {
option = $(this).find("option:selected").text();
alert(option);
if(option != "- Please Select -") {
window.location = "http://www.itmustbecollege.com/pics/pics-from-"+$("#schoolMenu option:selected").val();
}
});
fSchool.show();
Note that I cached $("#fSchool")
in the fSchool
variable, instead of repeatedly selecting it from the DOM.
And inside the .change()
handler, I reference the element that received the event using this
instead of "#schoolMenu"
, again to avoid repeated DOM selection.
精彩评论