Ajax Implementation

see i have three dropdownlists let it be A,B,C.when A is selected B should be updated and when B is clicked C should be updated.the first i.e when A is selected B is updated but when B is the codes written for A is also executed and got displayed in the B what do i do do someone help me

hi vikramsundar88,

an extension has been developed that could fit your needs …

check http://www.yiiframework.com/extension/jquerycascadeselect/


i cant understand the extenision u specified…plz could u explain me further

It’s simple:

First code adds the JS lib.

After that you add a dropdownlist of your choice (the first one, not chained to anything)

Third step is to add chained dropdowns (to the previous dropdown) in 2 ways presented there.

"getdata" - name of the function/action which serves the data

"chainedid" - the id of the previous dropdown at which the current is connected

Last function is an example on what you serve. You can do the function as you want, but the string returned with ajax must be:


What else to explain?


Hi Paul/imasia,

I would like to ask for your help regarding this extension. I am just new to yii btw.

Anyhow, the issue is that after selecting a value from the first dropdown the second dropdown is stuck in the loading state (with the loading animation), please see attached screencap.

I have checked the response of the ajax call thru firebug and it seems to be OK:

[{‘Value’:‘2’,‘Text’:‘April 2011’},{‘Value’:‘1’,‘Text’:‘October 2010’}]

Here’s the JS code generated:


jQuery(document).ready(function() {

function commonTemplate(i) {return “<option value=’” + i.Value + “’>” + i.Text + “</option>”;};


			ajax: {url: 'index.php?r=program/getdata' },	

			template: commonTemplate});



Thanks in advance!

Nevermind. I already figured it out. The problem was caused by a malformed JSON which in jQuery 1.4 the JSON data is parsed in a strict manner. So the following data:

[{‘Value’:‘2’,‘Text’:‘April 2011’},{‘Value’:‘1’,‘Text’:‘October 2010’}]

should be changed to:

[{"Value":"2","Text":"April 2011"},{"Value":"1","Text":"October 2010"}]

Thanks anyway.

doesn’t work for me please can u suggest this by using a regular way