extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现

功能需求：

①页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框

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

需求分析（思路）：

①创建页面：页面中有三个下拉框，分别为省，市，区/县

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

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

④选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求，请求该

市下的区/县信息，并将数据集填充到区/县下拉框中。

如图，我们把项目用MVC分层思想构建：

我们先创建VIEW层的JSP页面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'select.jsp' starting page</title><script type="text/javascript" src="js/j.js"></script><script type="text/javascript" >$(function(){//$.get("area",{parentid:0},function(data){//使用eval方法将数据转换为js对象eval("var areas="+data);//将响应省数据填充到省下拉框中//获取下拉框对象var sel=$("#pri");//清空原有内容sel.empty();//遍历for(var i=0;i<areas.length;i++){//填充sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");}});//页面加载成功给省下拉框添加onchange事件$("#pri").change(function(){//获取当前选择的省的areaidvar areaid=$("#pri").val();$.get("area",{parentid:areaid},function(data){eval("var areas="+data);var sel=$("#shi");sel.empty();for(var i=0;i<areas.length;i++){sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")}})$("#shi").trigger("change");});$("#shi").change(function(){//获取当前选择的市的areaidvar areaid=$("#shi").val();$.get("area",{parentid:areaid},function(data){eval("var areas="+data);var sel=$("#xian");sel.empty();for(var i=0;i<areas.length;i++){sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")}})});//封装公共方法function getData(areaid,sid){//发起ajax请求，请求当前省的市信息$.get("area",{parentid:areaid},function(data){//使用eval方法将数据转换为js对象eval("var areas="+data);//获取下拉框对象var sel=$("#"+sid);sel.empty();//遍历for(var i=0;i<areas.length;i++){sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")}//触发省下拉框的change事件$("#"+sid).trigger("change");})}});</script></head><body style="background-color:gray"><div style="margin:auto;width: 750px;margin-top: 200px;">省：<select name="" id="pri" style="width:200px;height:30px;"></select>市：<select name="" id="shi" style="width:200px;height:30px;"></select>区县：<select name="" id="xian" style="width:200px;height:30px;"></select></div></body>
</html>

Contrller层的AreaServlet代码以及dao具体实现类：

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");//获取请求信息String parentid=req.getParameter("parentid");//处理请求信息//创建服务层对象，将请求数据转发给服务层对象处理AreaService as = new AreaServiceImpl();ArrayList<Area> al=as.selAreaInfo(parentid);//响应处理结果resp.getWriter().write(new Gson().toJson(al));}
}

最后是Model层的dao具体实现类：

public class AreaDaoImpl implements AreaDao {@Overridepublic ArrayList<Area> selAreaInfoDao(String parentid) {//Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;ArrayList<Area> al=null;String sql="select * from area where parentid=?";try{conn=DBUtil.getConnection();ps=conn.prepareStatement(sql);ps.setString(1, parentid);rs=ps.executeQuery();al=new ArrayList<Area>();while(rs.next()){Area area = new Area();area.setAreaid(rs.getInt("areaid"));area.setAreaname(rs.getString("areaname"));area.setParentid(rs.getInt("parentid"));area.setArealevel(rs.getInt("arealevel"));area.setStatus(rs.getInt("status"));al.add(area);}}catch(Exception e){e.printStackTrace();}finally{DBUtil.closeAll(rs, ps, conn);}return al;}}

由于知乎上还不支持上传源码，如果有朋友需要的可以加我qq569193554.

extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现相关推荐

java省市县联动下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...
mysql 省市县三级联动查询_PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果...
连接数据库:db.php $dbhost="localhost"; $dbpassword="123"; $dbuser ='root';//数据库用户名 $d ...
python三级联动菜单_Excel–这才是三级联动下拉菜单的正确做法
Excel–这才是三级联动下拉菜单的正确做法,跟二级联动菜单完全不同! 文章来源:企鹅号 - Excel学习世界今天教大家制作三级联动下拉菜单. 很多同学以为三级联动下拉做法跟二级联动下拉菜单是一样 ...
MVVM下拉框绑定触发事件
开发工具与关键技术:MVVM 撰写时间:2021年06月15日在MVVM中下拉框的绑定跟MVC的下拉框绑定基本一样,只不过在MVVM中要写多一步声明下拉框的属性来接收数据. 首先我们要在DAL层写查 ...
2018最新版省市区三级联动下拉框+所有源代码以及数据库
2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...
dropdownlist三级联动怎么实现_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
dw二级联动下拉菜单插件宋君墨_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
中国地区三级联动下拉菜单的实现
1.首先是js文件(area.js): 1 function Dsy() 2 { 3 this.Items = {}; 4 } 5 Dsy.prototype.add = function(id,iA ...
中国地区三级联动下拉菜单
原文地址为: 中国地区三级联动下拉菜单 <html> <head> <meta http-equiv="Content-Type" content=& ...

extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现

extjs 点击下拉框三角形触发事件_省市县三级联动下拉框的具体实现相关推荐

最新文章

热门文章