二级联动查询数据库到下拉框

最新推荐文章于 2024-06-06 23:51:15 发布
最新推荐文章于 2024-06-06 23:51:15 发布
阅读量6.8k 收藏 5
点赞数 1
分类专栏： java selrvlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32201847/article/details/51760159
版权
本文介绍如何利用JSP和Servlet技术实现二级联动的效果，通过从数据库查询数据填充下拉菜单，为用户提供更丰富的筛选选项。内容涵盖了JSP页面的交互逻辑和Servlet后台的数据库操作过程。
摘要由CSDN通过智能技术生成

Jsp：

<%@ page language="java" contentType="text/html; charset=GB2312" import="java.sql.*,java.util.*,publicUse.*,com.web.*" errorPage=""
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<style type="text/css">
body{
    background:url(../image/abc.gif);
}
</style>
<script type="text/javascript">
        var xmlHttp=false;
        function createXMLHttpRequest()
        {
            if(window.XMLHttpRequest)
            {
                xmlHttp=new XMLHttpRequest();
                }
            else if(window.ActiveXObject)
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            if(xmlHttp==false)
                alert("创建XMLHttpRequest对象失败");
        }
        function updateCity()
        {
            var province=encodeURI(encodeURI(document.all.province.value));
            createXMLHttpRequest();
            xmlHttp.onreadystatechange=processor;
            xmlHttp.open("POST","<%=basePath%>servlet/City?province="+province);
最低0.47元/天 解锁文章
handsome_happy
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jeefast二级联动条件查询
weixin_45853906的博客
11-06 195
html js getGradeData:function(){ $.get(baseURL + "platform/Grade/FindAll/",{},function(r){ // alert(JSON.stringify(date)); if (r.code==0){ vm.grade=r.grade; } }); }, // 二级联动条件查询 /* * 查询出班级 * */ getClassesTwo : functio
jquery实现二级联动，实时查询数据库
Jasyca503的专栏
03-14 3272
一、jsp页面: * 服务类型： <select id="addServiceType" name="serviceType" style="width: 168px;" onchange="serviceTypeChange(this.options[this.selectedIndex].value);"> --选择服务方式-- 配送中心 门店 * 所属分类：
二级联动菜单 超强超简单的数据库（附数据库）
08-27
二级联动菜单 超强超简单的数据库（附数据库），这个肯定是最适合你的
利用 Selectpage 实现 多级联动
最新发布
weixin_40367377的博客
06-06 219
以下代码自行修改 data-source、data-field、id、name 等属性。Javascript代码。
如何用jstl的select标签做二级联动下拉列表框？？
dieyuanjiao9299的博客
11-09 341
下拉列表框的多级联动早就会了。但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题。主要问题在用Ajax查询到的数据如何拼成下拉选项的时候。其实很简单，但我还是折腾了好久。所以这里做下笔记，以免哪天忘了。 注意：我的前缀：prefix="form" <%@ taglib prefix="form" uri="http://www.springfra...
jQuery二级下拉菜单
08-28
利用JavaScript中的select标签模仿新浪微博的二级下拉菜单
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
10-18
在本文中，我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果，这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容，例如在选择省份后，...
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
01-20
本文将详细讲解如何使用JSP从数据库获取数据来填充下拉框，进而实现二级联动菜单。 首先，我们需要在JSP页面中创建第一个下拉框，用于展示一级菜单。这个下拉框的数据是从数据库中获取的。例如： ```jsp listKey...
java web下开发二级级联下拉菜单（数据库实现的）
05-23
网上级联菜单确有不少，单大多是直接写死到jsp页面中的，本代码是用mysql的数据库实现的，希望对大家有帮助！！！
jeefast框架：实现【二级联动查询】及【修改默认选中】功能
噗嗤
11-06 325
jeefast 二级联动查询及修改默认选中 这个是我的学生表 下面这个是我的班级表 年级和班级差不多 先在html中编辑下拉框的样式 <div class="form-group"> <div class="col-sm-2 control-label">年级</div> <div class="col-sm-10"> <select class="form-control" v-model="student.gid" @
Jquery实现ajax二级级联查询
07-02
用jquery的ajax实现的二级级联查询，其中用jsp或者servlet动态生成xml文件，然后再用jquery来解析xml获取其中的数据~~
ajax的登录后的二级联查
03-01
NULL 博文链接：https://li-yunj2ee-126-com.iteye.com/blog/277311
二级联动菜单 超强超简单的数据库
10-31
与数据库连接 ，员工表和部门表做成二级联动菜单，select下拉框实现的，选择部门的时候，自动加载部门的员工。简单，使用javascript asp实现！！
实现jsp页面二级下拉框联动，实时读取数据库数据
12-31
实现jsp页面二级下拉框联动，实时读取数据库数据实现jsp页面二级下拉框联动，实时读取数据库数据
单数据文件双条件下拉选择查询系统(二级联动筛选查询系统)
易查薪
07-31 496
单数据文件双条件下拉选择查询系统(二级联动筛选查询系统) 下载地址 https://gitee.com/weivote/lian2cha 上传试用 如不能用：检查下空间是否支持PHP 如果能用：自己上传数据后不能用，那么就是你操作问题 上传试用可以看看conn.php和查询页面内容对应关系 可以右键记事本打开复制文本内容回Excel参考样表与结果的关系。 个性化 使用简单：修改本页参数...
ASP.NET控件and代码实现二级联动查询
1900的博客
07-08 1129
业务逻辑 我们要实现的一个功能是：在院系表、专业表和学生表三个表中实现选择院系和选择专业的二级联动查询。 我们首先看我们要查询的数据总内容 如图 多个院系，每个院系又有多个专业，每个专业又有多名学生数据。 三张表 NO.1 院系表 NO.2 专业表 NO.3 学生表 用控件实现二级联动查询 用控件的方法比较简单 我们用两个DropDownList控件，第一个数据源是院系表，显示院系名字以...
联动查询
llthh的博客
05-24 494
下面我来给大家演示一下样式 这就是联动查询 我们来看看jq部分的代码 首先，我们要给下拉框绑定一个查询到数据库的数据，并且获取到他们的ID值 第二个部分 function bindSearchSpecialtyAndClass() { var academeID = $("#searchAcademeID").val(); //专业 createSelect(“searchSpecialtyID”, “@Url.Content(”~/BaseInfoManage/Class/SelectzyForSel
数据库关联查询
石马的农的博客
03-16 3246
一、创建用户 给用户的权限设计三个对象： 用户名、密码、主机 用户名 密码 主机 root 1234 localhost root 1234 10.10.65.250 laowang 1234 192.168.1.2 (一)创建用户 1.创建用户：create user laobia...
下拉框二级联动数据库
11-28
下拉框二级联动数据库的实现需要前端和后端的配合，前端需要通过JavaScript监听第一个下拉框的变化事件，然后向后端发送Ajax请求获取第二个下拉框的数据。后端需要提供两个接口，一个用于获取第一个下拉框的数据，另一个用于根据第一个下拉框的选择值获取第二个下拉框的数据。 以下是一个简单的实现思路： 1.前端代码： ```html <!-- 第一个下拉框 --> <select id="building"> <option value="">请选择公寓</option> <!-- 动态添加选项 --> </select> <!-- 第二个下拉框 --> <select id="dormitory"> <option value="">请选择宿舍</option> <!-- 动态添加选项 --> </select> <script> // 监听第一个下拉框的变化事件 document.getElementById('building').addEventListener('change', function() { // 获取选择的值 var buildingId = this.value; // 发送Ajax请求获取第二个下拉框的数据 var xhr = new XMLHttpRequest(); xhr.open('GET', '/findAllDormitory?buildingId=' + buildingId); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 解析返回的数据 var dormitories = JSON.parse(xhr.responseText); // 清空第二个下拉框的选项 var dormitorySelect = document.getElementById('dormitory'); dormitorySelect.innerHTML = '<option value="">请选择宿舍</option>'; // 动态添加选项 dormitories.forEach(function(dormitory) { var option = document.createElement('option'); option.value = dormitory.dormitoryId; option.textContent = dormitory.dormitoryName; dormitorySelect.appendChild(option); }); } }; xhr.send(); }); </script> ``` 2.后端代码： ```python # 定义两个接口 @app.route('/findAllBuilding') def find_all_building(): # 查询公寓表获取数据 buildings = Building.query.all() # 将数据转换为字典列表 building_list = [{'buildingId': building.buildingId, 'buildingName': building.buildingName} for building in buildings] # 返回数据 return jsonify(building_list) @app.route('/findAllDormitory') def find_all_dormitory(): # 获取一级下拉框的选择值 building_id = request.args.get('buildingId') # 根据选择值查询宿舍表获取数据 dormitories = Dormitory.query.filter_by(buildingId=building_id).all() # 将数据转换为字典列表 dormitory_list = [{'dormitoryId': dormitory.dormitoryId, 'dormitoryName': dormitory.dormitoryName} for dormitory in dormitories] # 返回数据 return jsonify(dormitory_list) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值