欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

省市县三级联动

程序员文章站 2024-03-14 20:28:28
...

省市县三级联动

在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');

要实现效果

省市县三级联动

相关标签: 三级联动