jQuery获取市、区县、乡镇、村

效果图:

首先根据自己方法把地区树状结构json字符串拿到

html下拉框和js写法如下:

   <select class="form-control" style="width: 140px" id="shi"name="shi" onchange="getDiquList(this.value,3);
      changeList(this.value,'shi')"> 
   </select> 
   <select class="form-control" style="width: 140px" id="quxian"name="quxian"                        
      onchange="getDiquList(this.value,4);changeList(this.value,'quxian')">
   </select>
   <select class="form-control" style="width: 140px" id="xiangzhen"name="xiangzhen" 
     onchange="getDiquList(this.value,5);changeList(this.value,'xiangzhen')">
   </select>
   <select class="form-control" style="width: 140px" id="dq5_id"name="dq5_id" 
      onchange="changeList(this.value,'dq5_id')">
   </select> 
 
   /******************* 省市县区域 开始 **************************/
   function getDiquList(pid,dq_level) {
      var dq_list = top.ajax.syncl("/sys/cs/project/system/diqu/getChildDiquList/"+pid,"")
	switch(dq_level){
	    case 2:$('#shi').html('<option value="">请选择城市</option>').addOptions(dq_list,'dq_id','dq_name');
		$('#quxian,#xiangzhen,#dq5_id').html('<option value="">请选择</option>');break;
	    case 3:$('#quxian').html('<option value="">请选择区县</option>').addOptions(dq_list,'dq_id','dq_name');
		$('#xiangzhen,#dq5_id').html('<option value="">请选择</option>');break;
	    case 4:$('#xiangzhen').html('<option value="">请选择乡镇</option>').addOptions(dq_list,'dq_id','dq_name');
		$('#dq5_id').html('<option value="">请选择</option>');break;
	    case 5:$('#dq5_id').html('<option value="">请选择乡村</option>').addOptions(dq_list,'dq_id','dq_name');
                  break;
	  }		
      }
  /******************* 省市县区域 结束 **************************/

    function changeList(value,item){
	if(value == ''){
	      con_map.remove(item);
	}else{
	      con_map.put(item,value);
	}
	      tp.curr_page=1;
	      loadListble();
        }
      function fnSearch(){
	changeList($('#search_key').val(),'kw');
      }
posted @   [奋斗]  阅读(195)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示