python三级联动函数式_简单三级联动的实现

当我们做一些例如注册页面的时候，可能会遇到要选择地址的操作，这时会出现三个选择框，当你选择省级单位的时候会自动在选择筐中，弹出她所属的市级单位的列表，当选择市级单位时又会弹出县级单位，我们要实现的就是这样的三级联动，当然也会有更简单的插件方法，但学习，我们可以通过这来看它运行的过程。我么要实现的需求是这样的：页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框

选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中

出现对应的该市下面的区/县信息

分析这个实现过程大致可以这样：1、创建页面：页面中有三个下拉框，分别为省、市、区/县

2、页面加载成功发起ajax请求，请求省的信息，并将响应结果 填充到省下拉框中

3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求 请求该省下的市信息，并将响应数据填充到市下拉框

4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求 请求该市下的区/县信息，并将数据填充到区/县下拉框中

数据库呢我们可以这样去构建：

创建表(area)：存储了省、市、区/县信息设计表实现一：只存储了数据，但是数据之间的层级关系没有存储。

地区id:areaid

地区名:areaname

设计表实现二：

地区id:areaid

地区名:areaname

地区上级id：parentid

建表语句：

Create table area (areaid int auto_increment primary key,areaname varchar(10) not null,

parenteid int(20) not null,arealevlel int(2) not null,status int(3) not null)

创建好表之后就可以进行项目的构建了，在mvc思想下进行项目分层：

首先在pojo层新建实体类Area，他的属性为：要添加共有取值赋值方法等，带参无参构造等；

package com.bjsxt.pojo;

public class Area {

private int areaid;

private String areaname;

private int parentid;

private int arealevel;

private int status;

之后便是业务服务层，要有AreaServive接口与其实现方法

package com.bjsxt.service;

import java.util.List;

import com.bjsxt.pojo.Area;

public interface AreaService {

List selByPid(int parentid);

}

package com.bjsxt.service.impl;

import java.util.List;

import com.bjsxt.dao.AreaDao;

import com.bjsxt.dao.impl.AreaDaoImpl;

import com.bjsxt.pojo.Area;

import com.bjsxt.service.AreaService;

public class AreaServiceImpl implements AreaService {

AreaDao ad= new AreaDaoImpl();

@Override

public List selByPid(int parentid) {

return ad.selByPid(parentid);

}

}

数据处理层

package com.bjsxt.dao;

import java.util.List;

import com.bjsxt.pojo.Area;

public interface AreaDao {

List selByPid(int parentid);

}

数据层实现类

ackage com.bjsxt.dao.impl;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import com.bjsxt.dao.AreaDao;

import com.bjsxt.pojo.Area;

import com.bjsxt.util.DBUtil;

public class AreaDaoImpl implements AreaDao {

@Override

public List selByPid(int parentid) {

//声明Connection conn=null;

PreparedStatement ps=null;

ResultSet rs=null;

List list=new ArrayList<>();

try {

conn=DBUtil.getConnection();

String sql="select * from area where parentid=?";

ps = conn.prepareStatement(sql);

ps.setInt(1, parentid);

rs=ps.executeQuery();

while(rs.next()){

Area ar=new Area();

ar.setAreaid(rs.getInt("areaid"));

ar.setAreaname(rs.getString("areaname"));

ar.setParentid(rs.getInt("parentid"));

ar.setArealevel(rs.getInt("arealevel"));

ar.setStatus(rs.getInt("status"));

list.add(ar);

}

} catch (SQLException e) {

// TODO Auto-generated catch blocke.printStackTrace();

}finally{

DBUtil.closeAll(rs, ps, conn);

}

return list;

}

}

还有DBUtil工具类，就是连接数据库操作的一个工具类，很多种，就不列出来了。

接下来就servlet的构建

package com.bjsxt.servlet;

import java.io.IOException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.bjsxt.pojo.Area;

import com.bjsxt.service.AreaService;

import com.bjsxt.service.impl.AreaServiceImpl;

import com.google.gson.Gson;

public class AreaServlet extends HttpServlet {

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

//设置编码格式req.setCharacterEncoding("utf-8");

resp.setContentType("text/html;charset=utf-8");

//获取请求数据

int parentid = Integer.parseInt(req.getParameter("parentid"));

//处理请求数据AreaService ar= new AreaServiceImpl();

List list= ar.selByPid(parentid);

//处理响应//直接相应resp.getWriter().write(new Gson().toJson(list));

}

}

项目展示jsp页面构建

%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

My JSP 'select.jsp' starting page

$(function() {

//默认省的信息getData(0,"pre");

//选择市$("#pre").change(function(){

var areaid=$("#pre").val();

getData(areaid,"shi");

})

//县的信息$("#shi").change(function(){

var areaid=$("#shi").val();

getData(areaid,"xian");

})

function getData(areaid,sid) {

$.get("area",{parentid:areaid},function(data){

//将省数据放入到下拉框//使用eval将数据转化为json格式对象eval("var areas="+data);

var sel=$("#"+sid);

sel.empty();

//遍历：for(var i=0;i

sel.append(""+areas[i].areaname+"");

}

$("#"+sid).trigger("change");

})

}

})

省：

市：

县：