dependent dropdown js


I am building a little dependent drop down to narrow down a persons options. It goes like this

Game (drop down) => Team (drop down) => Players (check box list)

It works fine in that I select my Game and that in turn brings up the Team dropdown with the correct Team already highlighted. It should also bring up the Players list. But it doesn’t, I have to click on another team and back to the original team to get the players list up. I’m sure that the reason for this is the onchange event I’m using, but I wonder what is the correct way to make the list populate on load and change as the teams are changed

        echo Html::dropDownList('team', $team->team_id, ArrayHelper::map($teams, 'team_id', 'name'),[

                'class' => 'form-control',

                'onchange' => '$.get( "'.Url::toRoute('team/ajax-player-list?id=') . '", { id: $(this).val() }, function( data ) {

                  $( "#players" ).html( data );



Thanks ;D

Unless you actually want to code this I would recommend you use kartik’s depdrop widget at