Cascading Dropdown change on load of page

Question

I have a Jquery Cascading drop down I took from the Internet some years ago which works fine. I want to expand it though so that the team selection is remembered in a Session.

The premise is there are users in a team, when you select a team it will display active users in that team. This works if you select the team once you load the page but if the Session is set the drop down doesn't cascade and you have to reselect the team for it to then cascade.

$("select#memberid_active").attr("disabled", "disabled");
$("select#teamid_active").change(function() {
    $("select#memberid_active").attr("disabled", "disabled");
    $("select#memberid_active").html("<option>Wait...</option>");
    var id = $("select#teamid_active option:selected").attr('value');
    $.post("selectconsultant_active.php", {
        id : id
    }, function(data) {
        $("select#memberid_active").removeAttr("disabled");
        $("select#memberid_active").html(data);
    });
});

This is the Drop Down code and I have the PHP Session working but when the page is loaded the cascading drop down does not update. The function would have to work for when the page loads and when you change. I've tried a few different approaches but I really don't understand JQuery enough to make them work.

Any help would be appreciated.

Thanks

Answer 1

 $("document").ready(function(){ /*This works to see if the active Option is valid by default when loaded from session and then fire the update method. As the default selected value for a dropdown is -1*/ if($("select#teamid_active").val() != -1){ //Fire the udpate if the team dropdown has a value on DOC ready updateTheUsersDropDown(); } }); $("select#memberid_active").attr("disabled", "disabled"); $("select#teamid_active").change(function() { updateTheUsersDropDown(); }); var updateTheUsersDropDown=function(){ $("select#memberid_active").attr("disabled", "disabled"); $("select#memberid_active").html("<option>Wait...</option>"); var id = $("select#teamid_active option:selected").attr('value'); $.post("selectconsultant_active.php", { id : id }, function(data) { $("select#memberid_active").removeAttr("disabled"); $("select#memberid_active").html(data); }); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

Please try this once