JSP中基于前置下拉框实现联动填充下拉框问题求助

别担心，我一步步带你搞定这个联动下拉框的问题，毕竟你是第一次写JS/JQuery，咱们尽量用最基础易懂的原生JS来实现～

1. 准备必要的依赖与标签库 #

首先得确保项目能支持数据遍历和JSON转换：

• 在JSP页面顶部引入JSTL核心标签库，方便遍历后台数据：

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

• 如果用Maven管理项目，在pom.xml里添加Gson依赖（用来把Java的Product列表转成前端能识别的JSON格式）：

  <dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10.1</version> <!-- 可以换成最新稳定版本 -->
  </dependency>
  

2. 编写下拉框的HTML结构 #

先把两个下拉框的基础结构写出来，第一个下拉框展示不重复的产品类型，第二个初始为空等待联动：

<%-- 先提取不重复的产品类型，避免下拉框出现重复选项 --%>
<c:set var="uniqueTypes" value="<%= new java.util.HashSet<>(products.stream().map(p -> p.getType()).collect(java.util.stream.Collectors.toList())) %>" />

<div>
  <label>Choose Type:</label>
  <select name="productType" form="addRequest" id="productType">
    <option value="">请选择产品类型</option>
    <c:forEach var="type" items="${uniqueTypes}">
      <option value="${type}">${type}</option>
    </c:forEach>
  </select>
</div>

<div style="margin-top: 10px;">
  <label>Choose Model:</label>
  <select name="productModel" form="addRequest" id="productModel">
    <option value="">请先选择产品类型</option>
  </select>
</div>

3. 把后台Product列表转成前端可操作的数组 #

在JSP里添加<script>标签，把后台传递的${products}转换成JS能直接使用的JSON数组：

<script>
// 将Java的Product列表转成前端JS可操作的JSON数组
const products = ${new com.google.gson.Gson().toJson(products)};
</script>

4. 编写JS联动逻辑（核心部分） #

监听第一个下拉框的变化事件，当用户选择类型后，自动筛选并填充对应的型号选项：

<script>
// 获取两个下拉框的DOM元素
const typeSelect = document.getElementById('productType');
const modelSelect = document.getElementById('productModel');

// 给类型下拉框添加变化监听
typeSelect.addEventListener('change', function() {
  // 获取当前选中的类型值
  const selectedType = this.value;
  
  // 先清空型号下拉框的现有选项
  modelSelect.innerHTML = '<option value="">请选择型号</option>';
  
  // 如果用户选中了具体类型，就筛选对应型号
  if (selectedType) {
    // 从products数组里过滤出当前类型的所有产品
    const matchedProducts = products.filter(product => product.type === selectedType);
    
    // 遍历筛选后的产品，逐个添加到型号下拉框
    matchedProducts.forEach(product => {
      const option = document.createElement('option');
      option.value = product.model; // 选项的实际值
      option.textContent = product.model; // 选项显示的文字
      modelSelect.appendChild(option);
    });
  }
});
</script>

5. 关键注意事项 #

• 确保你的Product类有getter方法：比如public String getType()和public String getModel()，因为EL表达式和Gson都需要通过getter来读取字段值。
• 如果你的Product字段名是驼峰式（比如productType），那JS里也要对应写成product.productType，别写错字段名哦～

这样就能实现类型选好后，型号下拉框自动更新对应选项的效果啦，全程用原生JS，没有复杂的JQuery语法，对你来说更容易理解上手～

内容的提问来源于stack exchange，提问作者FirePapaya