jQuery 实现多级联动

html代码

<tr>

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

<td>
    <input id="province" name="province"/>&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
<tr>
   
    <td style="text-align:right;font-size:12px;">市(州):</td>
<td>
    <input id="city" name="city" size="22"/>&nbsp;&nbsp;&nbsp;
    /td>
    <td style="text-align:right;font-size:12px;">县(区,市,特区):</td>
<td>
    <input id="county" name="county" size="22"/>&nbsp;&nbsp;&nbsp;
    </td>
    <td style="text-align:right;font-size:12px;">乡(镇):</td>
<td>
    <input id="towns" name="towns" size="22"/>&nbsp;&nbsp;&nbsp;
    /td>
    <td style="text-align:right;font-size:12px;">街(村):</td>
<td>
    <input id="street" name="street" size="22"/>&nbsp;&nbsp;&nbsp;
    </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>