javascript动态过滤下拉框选项：完整指南及代码示例_js怎么实现下拉框选择后过滤掉选择的内容-CSDN博客

本文链接：https://blog.csdn.net/m0_62395566/article/details/145937538

如果你正在学习 Java Web 开发，或者需要开发你的第一个 JSP 页面并实现动态过滤下拉框选项，那么这篇文章正是为你准备的！从零开始，我们将一步步带你完成整个部署过程，并展示如何使用 JavaScript 动态过滤下拉框选项。无论你是初学者还是有一定经验的开发者，都能从这篇文章中找到实用的信息。

1.准备工作

在开始之前，确保你已经安装了以下工具：

IntelliJ IDEA
JDK: https://www.oracle.com/java/technologies/downloads/#java11?er=221886
Tomcat：https://tomcat.apache.org/

2.创建 JSP 项目

2.1 使用 IntelliJ IDEA 创建项目

打开 IntelliJ IDEA。
选择File -> New -> Project。
选择Java，点击Next。
输入项目名称（如WebExample），选择合适的项目位置，点击Finish。
右击项目，选择Add Framework Support，选择Web Application

2.2 创建 JSP 文件

在项目中右击web,创建一个新的 JSP 文件（如filterComboBox.jsp）。
将以下代码粘贴到filterComboBox.jsp文件中：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态过滤下拉框选项</title>
</head>
<body>
    <h1>动态过滤下拉框选项</h1>
    <!-- 第一个下拉框 -->
    <select id="testDropdown1">
        <option value="1">测试选项1</option>
        <option value="2">测试选项2</option>
        <option value="3">测试选项3</option>
    </select>
    <!-- 第二个下拉框 -->
    <select id="testDropdown2">
        <option value="1">测试选项A</option>
        <option value="2">测试选项B</option>
        <option value="3">测试选项C</option>
    </select>
    <script>
        // 定义过滤下拉框选项的函数
        function filterComboBox(comboBoxId, targetOptions) {
            // 获取下拉框对象
            var comboBoxObj = document.getElementById(comboBoxId);
            if (!comboBoxObj) {
                console.error("下拉框未找到，ID: " + comboBoxId);
                return;
            }
            // 遍历下拉框中的所有选项
            for (var i = 0; i < comboBoxObj.length; i++) {
                var option = comboBoxObj.options[i]; // 获取当前选项
                if (option.text) { // 如果选项有文本
                    option.style.display = "none"; // 默认隐藏该选项
                    // 如果选项文本在目标数组中，则显示该选项
                    if (targetOptions.indexOf(option.text) > -1) {
                        option.style.display = "";
                    }
                }
            }
        }
        // 页面加载完成后执行过滤逻辑
        window.onload = function() {
            // 第一个下拉框：只显示“测试选项1”
            filterComboBox('testDropdown1', ['测试选项1']);
            // 第二个下拉框：显示“测试选项A”和“测试选项B”
            filterComboBox('testDropdown2', ['测试选项A', '测试选项B']);
        };
    </script>
</body>
</html>

3.在IDEA中部署Web项目

4.测试应用

4.1 启动 Tomcat

在IDEA中启动Tomcat,等待网页跳转或者手动访问应用程序

4.2 访问应用程序

打开网页浏览器。
输入以下 URL 测试你的 JSP 应用：

  http://localhost:8080/WebExample_war_exploded/filterComboBox.jsp

• 如果一切正常，你应该能够看到你创建的 JSP 页面，并且下拉框选项会根据代码逻辑动态显示或隐藏。以下为效果图：
在这里插入图片描述

6.总结

通过这篇文章，你已经掌握了如何在Apache Tomcat上部署 JSP 文件，并使用 JavaScript 动态过滤下拉框选项。这只是 Java Web 开发的冰山一角。如果你对 Java Web 开发感兴趣，可以进一步学习Servlet、JSP 标签库、Spring Framework等相关技术。希望这篇文章能为你开启 Java Web 开发的大门！