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

最新推荐文章于 2025-04-01 18:09:33 发布

小象二号

最新推荐文章于 2025-04-01 18:09:33 发布

阅读量4.7k

点赞数 3

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/weixin_42271651/article/details/90730396

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();

最低0.47元/天解锁文章