省市县三级联动

在controller层写

@RequestMapping("add")
	public String add(Shop shop,HttpServletRequest request){
		String address[] = shop.getAddress().split(",");
		String dizhi = "";
		for(String s : address){
			String sname = mService.getBySanId(s);
			dizhi = dizhi+","+sname;
		}
		shop.setAddress(dizhi);
		mService.add(shop);
		return "redirect:list.action";
	}
	
	@RequestMapping("getSanji")
	@ResponseBody
	public List<Sanji> getSanji(String pid){
		if (pid==null) {
			pid="0";
		}
		return mService.getSanji(pid);
	}

前台ajax

$.post(
		"getSanji.action",
		function(obj){
			for (var i = 0; i < obj.length; i++) {
				$("#sheng").append("<option value="+obj[i].id+">"+obj[i].name+"</option>");
			}
		},
		"json"
	  )
	  $("#sheng").change(function() {
		$("#shi").empty();
		$("#shi").append("<option value='0'>请选择</option>");
		$("#xian").empty();
		$("#xian").append("<option value='0'>请选择</option>");
	
		var pid=$("#sheng").val();
		if (pid!=0) {
			$.post(
				"getSanji.action",
				{pid:pid},
				function(array) {
				for (var i = 0; i < array.length; i++) {
					$("#shi").append("<option value ="+array[i].id+">"+array[i].name+"</option>");
				}
			 },
			 "json"
		  )
			
		}
	})
	$("#shi").change(function() {
		$("#xian").empty();
		$("#xian").append("<option value='0'>请选择</option>");
	
		var pid=$("#shi").val();
		if (pid!=0) {
			$.post(
				"getSanji.action",
				{pid:pid},
				function(array) {
				for (var i = 0; i < array.length; i++) {
					$("#xian").append("<option value ="+array[i].id+">"+array[i].name+"</option>");
				}
			 },
			 "json"
		  )
			
		}
	})
	$("#xian").change(function(){
		var spid=$("#sheng").val();
		var shipid=$("#shi").val();
		var xpid=$("#xian").val();
		var pid=[];
		pid.push(spid);
		pid.push(shipid);
		pid.push(xpid);
		alert(pid);
		$("[name=address]").val(pid.join());
	})
  })

下拉框

<div class="form-group">
    <div class="col-xs-4">
    <label for="exampleInputPassword1">供应商位置</label>
    <input name="address" type="hidden" class="form-control" id="exampleInputPassword1" >
    <select id="sheng">
    	<option>请选择</option>
    </select>
    <select id="shi">
    	<option>请选择</option>
    </select>
    <select id="xian">
    	<option>请选择</option>
    </select>
  </div>
  </div>

数据库

CREATE TABLE `sanji` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;
INSERT INTO `sanji` VALUES ('1', '北京', '0');
INSERT INTO `sanji` VALUES ('2', '山西', '0');
INSERT INTO `sanji` VALUES ('3', '河北', '0');
INSERT INTO `sanji` VALUES ('4', '河南', '0');
INSERT INTO `sanji` VALUES ('5', '山东', '0');
INSERT INTO `sanji` VALUES ('6', '海淀', '1');
INSERT INTO `sanji` VALUES ('7', '昌平', '1');
INSERT INTO `sanji` VALUES ('8', '丰台', '1');
INSERT INTO `sanji` VALUES ('9', '中关村', '6');
INSERT INTO `sanji` VALUES ('10', '西关环岛', '7');
INSERT INTO `sanji` VALUES ('11', '科技园', '8');
INSERT INTO `sanji` VALUES ('12', '太原', '2');
INSERT INTO `sanji` VALUES ('13', '吕梁', '2');
INSERT INTO `sanji` VALUES ('14', '小店', '12');
INSERT INTO `sanji` VALUES ('15', '尖草坪', '12');
INSERT INTO `sanji` VALUES ('16', '临县', '13');
INSERT INTO `sanji` VALUES ('17', '方山', '13');
INSERT INTO `sanji` VALUES ('18', '菏泽', '5');
INSERT INTO `sanji` VALUES ('19', '曹县', '18');
INSERT INTO `sanji` VALUES ('20', '石家庄', '3');
INSERT INTO `sanji` VALUES ('21', '新华区', '20');
INSERT INTO `sanji` VALUES ('22', '邓州', '4');
INSERT INTO `sanji` VALUES ('23', '镇平县', '22');

要实现效果


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值