easyUI combox 省市县3级联动

jsp

<form method="post" style="width:350px" id="edit_account">
				<table  style="width: 80%;margin: 10px auto;">
					<tr>
					<td>名称:</td>
					<td><input name="name" id="name" class="easyui-textbox" required="true" style="height:23px;"></input></td>
					</tr>	
					<tr>
					<td>省份:</td>
						<td><input id="proviceCode" required="true" name="proviceCode" class="easyui-combobox" style="height:23px;"/>
						</td>
					</tr>
					<tr>
					<td>市:</td>
						<td><input id="cityCode" required="true"  name="cityCode" class="easyui-combobox" style="height:23px;"/> 
						</td> 
					</tr>
					<tr>   
					<td>县(区):</td>
						<td><input id="countyCode" required="true"  name="countyCode" class="easyui-combobox" style="height:23px;"/>
						</td>
					</tr>
					<tr>
						<td>接口1:</td>
						<td><input name="inteface1" id="inteface1" class="easyui-textbox"  required="true"  style="height:23px;"></input></td>
					</tr>
					<tr>
						<td>接口2:</td>
						<td><input name="inteface2" id="inteface2" class="easyui-textbox"  style="height:23px;"></input></td>
					</tr>
					<tr>
						<td>接口3:</td>
						<td><input name="inteface3" id="inteface3" class="easyui-textbox"  style="height:23px;"></input></td>
					</tr>
				</table>
				<input type="hidden" id="county" name="county" />
				<input type="hidden" id="city" name="city" />
				<input type="hidden" id="provice" name="provice" />
				<input type="hidden" id="id" name="id" />
			</form>

js:

$(function(){
	 // 下拉框选择控件,下拉框的内容是动态查询数据库信息
	 $('#proviceCode').combobox({ 
	         url:'api/findAllProvice.html',
	         editable:false, //不可编辑状态
	         cache: false,
	         // panelHeight: 'auto',//自动高度适合
	         valueField:'id',   
	         textField:'name',
	         onHidePanel: function(){
	        	 $("#cityCode").combobox("setValue",'');
	        	 $("#countyCode").combobox("setValue",'');
	        	 //$("#cregicounty").val('');
	        	 var proviceCode = $('#proviceCode').combobox('getValue');
	        	 var proviceName = $('#proviceCode').combobox('getText');
	        	 $("#provice").val(proviceName);//赋值
	        	 if(proviceCode!=''){
	        		 $.ajax({
	        			 type: "POST",
	        			 url: "api/findAllProvice.html?id="+proviceCode,
	        			 cache: false,
	        			 dataType : "json",
	        			 success: function(data){
	        				 $("#cityCode").combobox("loadData",data);
	        			 }
	        		 }); 	
	        	 }
	         } 
	 }); 
	 $('#cityCode').combobox({ 
		 editable:false, //不可编辑状态
		 cache: false,
		 //panelHeight: 'auto',//自动高度适合
		 valueField:'id',   
		 textField:'name',
		 onHidePanel: function(){
	    	 // $("#cregicounty").val('');
	    	  $("#countyCode").combobox("setValue",'');
	    	  var cityCode = $('#cityCode').combobox('getValue');
	    	  var cityName = $('#cityCode').combobox('getText');
	    	  $("#city").val(cityName);	
	    	  if(cityCode!=''){
	    		  $.ajax({
	    			  type: "POST",
	    			  url: "api/findAllProvice.html?id="+cityCode,
	    			  cache: false,
	    			  dataType : "json",
	    			  success: function(data){
	    				  $("#countyCode").combobox("loadData",data);
	    			  }
	    		  }); 	
	    	  }
		 }
	 });  
	 $('#countyCode').combobox({ 
		 editable:false, //不可编辑状态
		 cache: false,
		 // panelHeight: 'auto',//自动高度适合
		 valueField:'id',   
		 textField:'name',
		 onHidePanel: function(){
			 var countyName=$('#countyCode').combobox('getText');
			 // $("#county").textbox('setValue',str);//赋值
			 $("#county").val(countyName);	
		 }
	 });  
	});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值