Easyui实现省市县三级联动

$(function(){

      

     // 下拉框选择控件，下拉框的内容是动态查询数据库信息

     $( '#province' ).combobox({ 

                 url: 'apply/provinceCombobox_combobox.action' ,

                 editable: false , //不可编辑状态

                 cache: false ,

                // panelHeight: 'auto',//自动高度适合

                 valueField: 'code' ,   

                 textField: 'note' ,

                  

     onHidePanel: function(){

  

             $( "#city" ).combobox( "setValue" , '' );

             $( "#county" ).combobox( "setValue" , '' );

             $( "#cregicounty" ).val( '' );

             var province = $( '#province' ).combobox( 'getValue' );     

             if (province!= '' ){

             $.ajax({

                 type: "POST" ,

                 url: "apply/cityCombobox_combobox.action?province=" +province,

                 cache: false ,

                 dataType : "json" ,

                 success: function(data){

                 $( "#city" ).combobox( "loadData" ,data);

                                        }

                                    });  

                            }

                      } 

                  }); 

      

     $( '#city' ).combobox({ 

  

         editable: false , //不可编辑状态

         cache: false ,

         //panelHeight: 'auto',//自动高度适合

         valueField: 'code' ,   

         textField: 'note' ,

         onHidePanel: function(){

             $( "#cregicounty" ).val( '' );

             $( "#county" ).combobox( "setValue" , '' );

             var city = $( '#city' ).combobox( 'getValue' );     

             if (city!= '' ){

             $.ajax({

                 type: "POST" ,

                 url: "apply/countyCombobox_combobox.action?city=" +city,

                 cache: false ,

                 dataType : "json" ,

                 success: function(data){

                 $( "#county" ).combobox( "loadData" ,data);

                                        }

                                    });  

                            }

                      }

        });  

     $( '#county' ).combobox({ 

         editable: false , //不可编辑状态

         cache: false ,

        // panelHeight: 'auto',//自动高度适合

         valueField: 'code' ,   

         textField: 'note' ,

         onHidePanel: function(){

          var str=$( '#county' ).combobox( 'getText' );

             $( "#cregicounty" ).val(str); 

                      }

      });  

    

    $( '#country' ).combobox({ //国家代码初始化 

         valueField: 'english' ,   

         textField: 'note' ,

         url: 'json/country.json' ,

         cache: false ,

        //panelHeight: 'auto',//自动高度适合

         onChange: function(newValue,oldValue){  

  

             countrySearch(newValue);

             countrys(newValue);

         }

     });

});

 

 

 

第二篇

jQuery(function(){ 

     // 省级 

      $( '#province' ).combobox({

             valueField: 'itemvalue' , //值字段

             textField: 'itemtext' , //显示的字段

             url: '/user/sort/province_list' ,

             panelHeight: 'auto' ,

             required: true ,

             editable: true , //不可编辑，只能选择

             value: '${user.province}' ,

             onChange:function(province){

                 //$('#city').combobox('clear');

                 $( '#city' ).combobox({

                 valueField: 'itemvalue' , //值字段

                 textField: 'itemtext' , //显示的字段

                 url: '/user/sort/city_list?province=' +province,

                 panelHeight: 'auto' ,

                 required: true ,

                 editable: true , //不可编辑，只能选择

                 value: '--请选择--'

             });

             }

          });

     //县市区 

          $( '#city' ).combobox({

             valueField: 'itemvalue' , //值字段

             textField: 'itemtext' , //显示的字段

             url: '/user/sort/city_list?province=${user.province}' ,

             panelHeight: 'auto' ,

             required: true ,

             editable: true , //不可编辑，只能选择

             value: '${user.city}'

          });

     });

  

// 表单table

            <TR>

             <TD align= "right" >地区 省级</TD>

             <TD align= "left" >

                     <INPUT style= "WIDTH: 128px" id=province class =easyui-validatebox type=text name=province validType= "selectValid['--请选择--']" >

             </TD>

         </TR>

          <TR>

             <TD align= "right" >地区  县市区</TD>

             <TD align= "left" >

                     <INPUT style= "WIDTH: 128px" id=city class =easyui-validatebox type=text name=city validType= "selectValid['--请选择--']" >

             </TD>

         </TR>

 

 

 

 

第三篇

easyUi的Combobox:



1. // 一层Combo   
2. var srmCombx = $("#txtShouName").combobox({  
3. loader:function(param,success,error){  
4.     $.ajax({  
5. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+selectSgId+'',  
6. dataType: 'json',  
7. success: function(data){  
8. data.unshift({equipmentid:'',equipmentname:'全部'});  
9. success(data);  
10. },  
11.                error: function(){  
12. error.apply(this, arguments);  
13. }  
14. });  
15.    },  
16.    onSelect:function(record){  //onSelect 用户点击时触发的事件  在此的意义在于，用户点击一级后自动二级combobox   
17.     piperowCombx.combobox({  
18. loader:function(param,success,error){  
19.     $.ajax({  
20. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName").combobox("getValue")+'',  
21. dataType: 'json',  
22. success: function(data){  
23. data.unshift({equipmentid:'',equipmentname:'全部'});  
24. success(data);  
25. },  
26.                error: function(){  
27. error.apply(this, arguments);  
28. }  
29. });  
30.    },  
31.    onSelect:function(record){ //这里也使用了onSelect事件，在二级combobox被用户点击时触发三级combobox   
32.     pipeCombx.combobox({  
33. loader:function(param,success,error){  
34.     $.ajax({  
35. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName").combobox("getValue")+'',  
36. dataType: 'json',  
37. success: function(data){  
38. data.unshift({equipmentid:'',equipmentname:'全部'});  
39. success(data);  
40. },  
41.                error: function(){  
42. error.apply(this, arguments);  
43. }  
44. });  
45.    },  
46.    valueField: 'equipmentid',     
47.    textField: 'equipmentname',  
48.    value:'',  
49.    editable:false  
50. });  
51.    },  
52.    onLoadSuccess:function(){  //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时，二级和三级就需要清空   
53.     pipeCombx.combobox("clear");  
54.     pipeCombx.combobox('setValue', '全部'); //给combobox下拉框设置一个值，否则为空不好看   
55.    },  
56.    valueField: 'equipmentid',     
57.    textField: 'equipmentname',  
58.    value:'',  
59.    editable:false  
60. }).combobox("clear"); //清空二级下拉框   
61.   
62.    },  
63.    valueField: 'equipmentid',     
64.    textField: 'equipmentname',  
65.    value:'',  
66.    editable:false  
67. });  
68. /******************************************************************************************************/  
69. //下面的俩个是组件，   
70.   
71. //  二层Combo   
72. var piperowCombx = $("#txtPipeRowName").combobox({  
73. loader:function(param,success,error){  
74.     $.ajax({  
75. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName").combobox("getValue")+'',  
76. dataType: 'json',  
77. success: function(data){  
78. data.unshift({equipmentid:'',equipmentname:'全部'});  
79. success(data);  
80. },  
81.                error: function(){  
82. error.apply(this, arguments);  
83. }  
84. });  
85.    },  
86.    valueField: 'equipmentid',     
87.    textField: 'equipmentname',  
88.    value:'',  
89.    editable:false  
90. });  
91.   
92. //三层Combo   
93. var pipeCombx=$("#txtPipeName").combobox({  
94. loader:function(param,success,error){  
95.     $.ajax({  
96. url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName").combobox("getValue")+'',  
97. dataType: 'json',  
98. success: function(data){  
99. data.unshift({equipmentid:'',equipmentname:'全部'});  
100. success(data);  
101. },  
102.                error: function(){  
103. error.apply(this, arguments);  
104. }  
105. });  
106.    },  
107.    valueField: 'equipmentid',     
108.    textField: 'equipmentname',  
109.    value:'',  
110.    editable:false  
111. });