CODEWITHSUNDEEP
javascriptphpjqueryhtml
M_Jones88
M_Jones88

Reputation: 35

Cascading Dropdown change on load of page

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

Upvotes: 0

Views: 1203

Answers (1)

HGrover
HGrover

Reputation: 225

$("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

Upvotes: 1

Related Questions