Question

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]) .'</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?

Answer 1

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.