jQuery 实现多级联动

html代码

<tr>

<td style="text-align:right;font-size:12px;">省:</td>

<td>

    <input id="province" name="province"/>   

    </td>

  </tr>

<tr>

   

    <td style="text-align:right;font-size:12px;">市(州):</td>
<td>

    <input id="city" name="city" size="22"/>   

    /td>

    <td style="text-align:right;font-size:12px;">县(区,市,特区):</td>
<td>

    <input id="county" name="county" size="22"/>   

    </td>

    <td style="text-align:right;font-size:12px;">乡(镇):</td>
<td>

    <input id="towns" name="towns" size="22"/>   

    /td>

    <td style="text-align:right;font-size:12px;">街(村):</td>
<td>

    <input id="street" name="street" size="22"/>   

    </td>
</tr>

js文件

<script type="text/javascript">

//先初始化对象  

$(function(){   

     $('#province').combobox({

      url:'<%=path %>/controller/dictionary/getAddress.json?parentCode=1',

           width: 173,  

           panelHeight: "auto",  

           editable: false,  

           valueField: 'code',  

            textField: 'area',  

            onLoadSuccess: function () {  

       //加载完成后,设置选中第一项  

      /*  var val = $(this).combobox("getData");  

       for (var item in val[0]) {  

           if (item == "code") {  

               $(this).combobox("select", val[0][item]);  

           }  

       }   */

   },  

 onChange: function () {  

       //更新下一级列表  

       $('#city').combobox('reload', "<%=path %>/controller/dictionary/getAddress.json?parentCode=" + $(this).combobox("getValue"));  

   } 

       });  

   $('#city').combobox({  

           width: 173,  

           panelHeight: "auto",  

           editable: false,  

           valueField: 'code',  

           textField: 'area',  

            onLoadSuccess: function () {  

       //加载完成后,设置选中第一项  

   },  

   onChange: function () {  

       //更新市列表  

       $('#county').combobox('reload', "<%=path %>/controller/dictionary/getAddress.json?parentCode=" + $(this).combobox("getValue"));  

   }  

       });  

         

       $('#county').combobox({  

           width: 173,  

           panelHeight: "auto",  

           editable: false,  

           valueField: 'code',  

           textField: 'area',

           onLoadSuccess: function () {  

           },

           onChange: function () {  

               //更新市列表  

               $('#towns').combobox('reload', "<%=path %>/controller/dictionary/getAddress.json?parentCode=" + $(this).combobox("getValue"));  

           } 

       });  

       $('#towns').combobox({  

           width: 173,  

           panelHeight: "auto",  

           editable: false,  

           valueField: 'code',  

           textField: 'area',

           onLoadSuccess: function () {  

           },

           onChange: function () {  

               //更新市列表  

               $('#street').combobox('reload', "<%=path %>/controller/dictionary/getAddress.json?parentCode=" + $(this).combobox("getValue"));  

           } 

       });

     

       $('#street').combobox({  

           width: 173,  

           panelHeight: "auto",  

           editable: false,  

           valueField: 'code',  

           textField: 'area',

           onLoadSuccess: function () {  

           }

       });

     });

</script>