How to use dropDownList to call two ajax

I have a master(States) dropDownList and a child dropDownList(Cities). This is working.

What I want to do is, when master State is selected, I want populate dropDownList Cities, and at the same time get the Listings in that State and display. (limit 6).

When City is selected, I want to get all Listings in that city and display in the same div conatiner, replacing the State's listing. Also my Listings in City has three Categories. (This will be whole result set with pagination)

Any suggestion how this can be accompliashed. Thank you in advance. 

Good news: you can do almost everything you want by using custom JS functions, like this:

<?= CHtml::activeDropDownList($state, 'stateId', CHtml::listData($stateList, 'id', 'name'), array('onchange' => 'updateYour Fields(this.value)')); ?>

Bad news: there’s a bug :)

Thank you very much. I like the way you answered. It will be great to have that. Anyways, I just re-did my UI without using the dropDownList