Java中使用Select标签绑定下拉框以及通过选中下拉框内容动态回填

最新推荐文章于 2025-11-28 14:28:02 发布

原创最新推荐文章于 2025-11-28 14:28:02 发布 · 5.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Java

本文介绍了如何在Java中使用Select标签绑定下拉框，并根据选择的下拉框内容动态回填表格数据。涉及内容包括JSP、Servlet、DAO、POJO类的使用，以及JavaScript插件SharingPlugins.js的下拉框绑定方法。通过选择下拉框，调用后台服务获取对应数据，实现页面的动态更新。

Java中绑定下拉框以及通过选中下拉框内容动态回填

MySql里数据库里的表格

思路：选择下拉框内容，动态回填旁边的表格数据：

效果图：

注意看路径，别把路径写错了；

JDBC的配置前面的博客里有说到，在这里就不写了。

下面是代码部分：

主要组成部分：一个servlet、一个Jsp、一个po类、一个dao、一个dao实现类、一个service、一个service实现类；（如果只是用来做效果的话，service和service实现类可以不写）

JSP代码：

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

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>



<%

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 'test.jsp' starting page</title>

   

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

   

<script type="text/javascript" src="${ctx}/Content/js/jquery-1.12.4.js"></script>

<script type="text/javascript" src="${ctx}/Content/js/SharingPlugins.js"></script>

  </head>

  <body>

    <div class="col-lg-1 col-md-1 col-sm-1 text-right">

           <span>始发地：</span>

       </div>

       <div class="col-lg-2 col-md-2 col-sm-2 reset">

           <select id="addressone" name="id" style="height:28px;width:100px;"></select>

       <input id="AddressAbbrone"  value=""   style="width: 40px;" />

       </div>

       <script type="text/javascript">

       appendOption("addressone", "${ctx}/servlet/DropDownBoxServlet?type=address");   

       //下拉框回填

       $("#addressone").change(

              function() {

                  var city = $("#addressone").val();

                  $.post("${ctx}/servlet/DropDownBoxServlet?type=addressAbbr&id="

                         + city, function(data) {

                     $("#AddressAbbrone").val(data);

                  });

              });

       </script>

  </body>

</html>

记得加上这两句代码：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>

封装的SharingPlugins.js插件里的下拉框部分：

//下拉框绑定

function appendOpion(id, url) {

$.getJSON(url, function(data) {

$("#" + id).empty();

$("#" + id).append(

"<option value=" + 0 + "> " + "——请选择—— "

+ "</option>");

$.each(data, function(i) {

$("#" + id).append(

'<option value="' + data[i].id + '">'

+ data[i].name + '</option>')

})

}

可以将这段代码封装到java文件中，然后引用就好啦！记住这里面封装的是id和name，所以在封装po类的时候也需要把对应的参数名称设置成name。可以作为一个专门的下拉框工具类来使用。

po类的内容：我这里在vo类里面，因为这个类我是专门作为工具类来使用的。

package com.xmj.vo;

import java.io.Serializable;

public class NameVo implements Serializable{

private static final long serialVersionUID = 1L;

private int id;

private String name;//封装的js下拉框插件中的名称是name，所以要封装一个name来接收各个下拉框的值

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

Dao类代码：

package com.xmj.dao;

import java.util.List;

import com.xmj.vo.NameVo;

public interface IDropDownBoxDao {

public String AddressAbbr(int id);// 根据id查询一个字段；

public List<NameVo> getAddressName();// 查询地区名称

}

DaoImpl代码：

package com.xmj.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.xmj.dao.IDropDownBoxDao;

import com.xmj.po.AddressPo;

import com.xmj.util.DBUtil;

import com.xmj.vo.NameVo;

public class DropDownBoxImpl implements IDropDownBoxDao {

private Connection con = null;// 引用的是java.sql类型，不要引错了

private PreparedStatement ps = null;

private ResultSet rs = null;

@Override

public List<NameVo> getAddressName() {

List<NameVo> list = new ArrayList<NameVo>();

String sql = "select * from address";

con = DBUtil.getConnection();

try {

ps = con.prepareStatement(sql);

rs = ps.executeQuery();

while (rs.next()) {

NameVo f = new NameVo();

f.setId(rs.getInt("id"));

f.setName(rs.getString("addressName"));

/* f.setAddressSpell(rs.getString("addressSpell"));

f.setAddressSpellAddr(rs.getString("addressSpellAddr"));*/

list.add(f);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DBUtil.close(con, ps, rs);

}

return list;

}

public static void main(String[] args) {

DropDownBoxImpl ddb = new DropDownBoxImpl();

// ddb.Address(4);

// List<Address> a=ddb.getAllAddress();

//ddb.addressName();

ddb.AddressAbbr(3);

List<NameVo> po=ddb.selectAllPassengerType();

List<NameVo> ps=ddb.selectAllCertificateType();

}

@Override

public String AddressAbbr(int id) {

String sql = "select addressSpellAddr from address where id=?";

con = DBUtil.getConnection();

String t = "";

try {

ps = con.prepareStatement(sql);

ps.setInt(1, id);

rs = ps.executeQuery();

while (rs.next()) {//必须循环，哪怕只查询一条数据

AddressPo a = new AddressPo();

//t = rs.getString("id");

t = rs.getString("addressSpellAddr");

System.out.println(t);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DBUtil.close(con, ps, rs);

}

return t;

}

这里面的DBUtil在前面博客里有写。也是封装类，这是路径：

https://blog.csdn.net/weixin_42271651/article/details/90315342

service代码：

package com.xmj.service;

import java.util.List;

import com.xmj.vo.NameVo;

public interface IDropDownBoxService {// 下拉框服务

public String AddressAbbr(int id);

public List<NameVo> getAddressName();

}

ServiceImpl代码：

package com.xmj.service.impl;

import java.util.List;

import com.xmj.dao.IDropDownBoxDao;

import com.xmj.dao.impl.DropDownBoxImpl;

import com.xmj.service.IDropDownBoxService;

import com.xmj.vo.NameVo;

public class DropDownBoxServiceImpl implements IDropDownBoxService {

private IDropDownBoxDao ddb=new DropDownBoxImpl();

@Override

public String AddressAbbr(int id) {

return ddb.AddressAbbr(id);

}

@Override

public List<NameVo> getAddressName() {

List<NameVo> list=ddb.getAddressName();

return list;

}

最后是servlet代码：

package com.xmj.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

import com.xmj.po.FlightPo;

import com.xmj.service.IDropDownBoxService;

import com.xmj.service.IFlightService;

import com.xmj.service.impl.DropDownBoxServiceImpl;

import com.xmj.service.impl.FlightServiceImpl;

import com.xmj.util.Tools;

import com.xmj.vo.Bsgrid;

import com.xmj.vo.NameVo;

public class DropDownBoxServlet extends HttpServlet {//只放下拉框的servlet

private static final long serialVersionUID = 8631318254212956867L;

private IDropDownBoxService idd = new DropDownBoxServiceImpl();

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String type = request.getParameter("type");

if ("passengerType".equals(type)) {

passengerType(request,response);

}else if ("address".equals(type)) {

address(request, response);

} else if ("addressAbbr".equals(type)) {

addressAbbr(request, response);

}else if ("bsGridList".equals(type)) {

bsGridList(request, response);

}else if ("CertificateType".equals(type)) {

CertificateType(request, response);

}

public void passengerType(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {//旅客类型

response.setCharacterEncoding("UTF-8");

List<NameVo> a = idd.selectAllPassengerType();

JSONArray array = new JSONArray();

array.addAll(a);

PrintWriter out = response.getWriter();

out.write(array.toString());

out.flush();

out.close();

}

public void address(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException { // 地区下拉框

response.setCharacterEncoding("utf-8");

List<NameVo> a = idd.getAddressName();

//request.setAttribute("address", a);

JSONArray array = new JSONArray();

array.addAll(a);

PrintWriter out = response.getWriter();

out.write(array.toString());

out.flush();

out.close();

}

public void addressAbbr(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {// 地区下拉框回填

response.setCharacterEncoding("utf-8");

Integer id = Integer.valueOf((request.getParameter("id").toString()

.trim()));

String b = idd.AddressAbbr(id);

//request.setAttribute("addressAbbr", b);

JSONArray arrays = new JSONArray();

arrays.add(b);

PrintWriter outs = response.getWriter();

outs.write(b);

outs.flush();

outs.close();

}

Java中绑定下拉框以及通过选中下拉框内容动态回填

MySql里数据库里的表格

思路：选择下拉框内容，动态回填旁边的表格数据：

JDBC的配置前面的博客里有说到，在这里就不写了。

下面是代码部分：

JSP代码：

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

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>

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>

<title>My JSP 'test.jsp' starting page</title>

</head>

<body>

</div>

</div>

appendOption("addressone", "${ctx}/servlet/DropDownBoxServlet?type=address");

//下拉框回填

$("#addressone").change(

function() {

var city = $("#addressone").val();

$.post("${ctx}/servlet/DropDownBoxServlet?type=addressAbbr&id="

+ city, function(data) {

$("#AddressAbbrone").val(data);

});

</script>

</body>

</html>

封装的SharingPlugins.js插件里的下拉框部分：

//下拉框绑定

function appendOpion(id, url) {

$.getJSON(url, function(data) {

$("#" + id).empty();

$("#" + id).append(

"<option value=" + 0 + "> " + "——请选择—— "

+ "</option>");

$.each(data, function(i) {

$("#" + id).append(

'<option value="' + data[i].id + '">'

+ data[i].name + '</option>')

})

}

po类的内容：我这里在vo类里面，因为这个类我是专门作为工具类来使用的。

package com.xmj.vo;

import java.io.Serializable;

public class NameVo implements Serializable{

/**

private static final long serialVersionUID = 1L;

private int id;

private String name;//封装的js下拉框插件中的名称是name，所以要封装一个name来接收各个下拉框的值

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

Dao类代码：

package com.xmj.dao;

import java.util.List;

import com.xmj.vo.NameVo;

public interface IDropDownBoxDao {

public String AddressAbbr(int id);// 根据id查询一个字段；

public List<NameVo> getAddressName();// 查询地区名称

}

DaoImpl代码：

package com.xmj.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.xmj.dao.IDropDownBoxDao;

import com.xmj.po.AddressPo;

import com.xmj.util.DBUtil;

import com.xmj.vo.NameVo;

public class DropDownBoxImpl implements IDropDownBoxDao {

private Connection con = null;// 引用的是java.sql类型，不要引错了

private PreparedStatement ps = null;

private ResultSet rs = null;

@Override

public List<NameVo> getAddressName() {

List<NameVo> list = new ArrayList<NameVo>();

String sql = "select * from address";

con = DBUtil.getConnection();

try {

ps = con.prepareStatement(sql);

rs = ps.executeQuery();

while (rs.next()) {

NameVo f = new NameVo();

f.setId(rs.getInt("id"));

f.setName(rs.getString("addressName"));

/* f.setAddressSpell(rs.getString("addressSpell"));

f.setAddressSpellAddr(rs.getString("addressSpellAddr"));*/

list.add(f);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DBUtil.close(con, ps, rs);

}

return list;

}

public static void main(String[] args) {

DropDownBoxImpl ddb = new DropDownBoxImpl();

// ddb.Address(4);

// List<Address> a=ddb.getAllAddress();

//ddb.addressName();

ddb.AddressAbbr(3);

List<NameVo> po=ddb.selectAllPassengerType();

List<NameVo> ps=ddb.selectAllCertificateType();

}

@Override

public String AddressAbbr(int id) {

String sql = "select addressSpellAddr from address where id=?";

con = DBUtil.getConnection();

String t = "";

try {

ps = con.prepareStatement(sql);

ps.setInt(1, id);

rs = ps.executeQuery();

while (rs.next()) {//必须循环，哪怕只查询一条数据

AddressPo a = new AddressPo();

//t = rs.getString("id");

t = rs.getString("addressSpellAddr");

System.out.println(t);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DBUtil.close(con, ps, rs);

}

return t;

}

这里面的DBUtil在前面博客里有写。也是封装类，这是路径：

https://blog.csdn.net/weixin_42271651/article/details/90315342

service代码：

package com.xmj.service;

import java.util.List;

import com.xmj.vo.NameVo;

public interface IDropDownBoxService {// 下拉框服务

public String AddressAbbr(int id);

public List<NameVo> getAddressName();

}

ServiceImpl代码：

package com.xmj.service.impl;

import java.util.List;

import com.xmj.dao.IDropDownBoxDao;

import com.xmj.dao.impl.DropDownBoxImpl;

import com.xmj.service.IDropDownBoxService;

import com.xmj.vo.NameVo;

public class DropDownBoxServiceImpl implements IDropDownBoxService {

private IDropDownBoxDao ddb=new DropDownBoxImpl();

@Override

public String AddressAbbr(int id) {

return ddb.AddressAbbr(id);

}

@Override

public List<NameVo> getAddressName() {

List<NameVo> list=ddb.getAddressName();

return list;

}

最后是servlet代码：

package com.xmj.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

import com.xmj.po.FlightPo;

import com.xmj.service.IDropDownBoxService;

import com.xmj.service.IFlightService;

import com.xmj.service.impl.DropDownBoxServiceImpl;

import com.xmj.service.impl.FlightServiceImpl;

import com.xmj.util.Tools;

import com.xmj.vo.Bsgrid;

import com.xmj.vo.NameVo;

public class DropDownBoxServlet extends HttpServlet {//只放下拉框的servlet

private static final long serialVersionUID = 8631318254212956867L;

private IDropDownBoxService idd = new DropDownBoxServiceImpl();

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String type = request.getParameter("type");

if ("address".equals(type)) {

address(request, response);

} else if ("addressAbbr".equals(type)) {

addressAbbr(request, response);

}

public void address(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException { // 地区下拉框

response.setCharacterEncoding("utf-8");

List<NameVo> a = idd.getAddressName();

//request.setAttribute("address", a);

JSONArray array = new JSONArray();

array.addAll(a);

PrintWriter out = response.getWriter();

out.write(array.toString());

out.flush();

out.close();

}

public void addressAbbr(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {// 地区下拉框回填

response.setCharacterEncoding("utf-8");

Integer id = Integer.valueOf((request.getParameter("id").toString()

.trim()));

String b = idd.AddressAbbr(id);

//request.setAttribute("addressAbbr", b);

JSONArray arrays = new JSONArray();

arrays.add(b);

PrintWriter outs = response.getWriter();

outs.write(b);

outs.flush();

outs.close();

}