2 comboboxes,select one,change another
<p>now i have improved the code,and i have a new question,</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    //simulate the database
    var data={};
    data.id1=[{value:"id1",text:"aa1"},{value:"id2",text:"aa2"}];
    data.id2=[{value:"id3",text:"aa3"},{value:"id4",text:"aa4"}];
    data.id1.id1=[{value:"id1",text:"aaa1"},{value:"id2",text:"aaa2"}];
    data.id1.id2=[{value:"id3",text:"aaa3"},{value:"id4",text:"aaa4"}];
    data.id2.id1=[{value:"id5",text:"aaa5"},{value:"id6",text:"aaa6"}];
    data.id2.id2=[{value:"id7",text:"aaa7"},{value:"id8",text:"aaa8"}];
    $(function(){
        var c1id;
        $("#c1").combobox("loadData",[{value:"id1",text:"a1"},{value:"id2",text:"a2"}]);
        //change c2 box when c1 on select
        $("#c1").combobox({
            onSelect:function(record){
                c1id=record.value;
                $("#c2").combobox("clear");
                $("#c2").combobox("loadData",data[record.value]);
                try{var c2data=$("#c2").combobox("getData");//c2data.length is 0?
                value=c2data[0].text;
                $("#c2").combobox("select",value);}
                catch(e){

                }
            }
        }) 
        $("#c2").combobox({
            onSelect:function(record){
                $("#c3").combobox("clear");
                $("#c3").combobox("loadData",data[c1id][record.value]);
                try{var c2data=$("#c3").combobox("getData");//c2data.length is 0?
                value=c2data[0].text;
                $("#c3").combobox("select",value);}
                catch(e){

                }
            }
        })
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input id="c1" class="easyui-combobox"&gt;
&lt;input id="c2" class="easyui-combobox"&gt;
&lt;input id="c3" class="easyui-combobox"&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>now i have improved the code,and i have a new question,</p>

<p>now 3 combo,and i select "a1" in 1st combo,the "aa1" auto selected in second combo,but "aaa1" not been selected in the third combo .
cause  </p>

<pre><code>$("#c2").combobox({
        onSelect:function(record){
</code></pre>

<p>the <code>record</code> here is undefined.
why?
this line</p>

<pre><code>$("#c2").combobox("select",value);} 
</code></pre>

<p>will trigger #c2 onselect event,but the record parameter is undefined.
so i can not auto select the first item of third combobox when i selected the first combobox.</p>

<hr>

<h2>Here is the question before:</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    //simulate the database
    var data={};
    data.id1=[{value:"id1",text:"aa1"},{value:"id2",text:"aa2"}];
    data.id2=[{value:"id3",text:"aa3"},{value:"id4",text:"aa4"}];
    $(function(){
        $("#c1").combobox("loadData",[{value:"id1",text:"a1"},{value:"id2",text:"a2"}]);
        //change c2 box when c1 on select
        $("#c1").combobox({
            onSelect:function(record){
                $("c2").combobox("clear");
                $("c2").combobox("loadData",data[record.value]);
                var c2data=$("#c2").combobox("getData");//c2data.length is 0?
                value=c2data[0].text;
                $("c2").combobox("select",value);
            }
        }) 
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input id="c1" class="easyui-combobox"&gt;
&lt;input id="c2" class="easyui-combobox"&gt;
&lt;input id="c3" class="easyui-combobox"&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>There are 2 comboboxes,when the item of the first comboxbox been selected,change the data of second.And select the 1st item of the </p>

<p>second combobox.
after page loaded,i selected "a1" of the first comobox,
this line has been executed:
var c2data=$("#c2").combobox("getData");
but then c2data.length is 0?
why?</p>