html / js:刷新“选择”选项

时间:2010-05-27 13:32:24

标签: javascript jsp select option

有一个品牌和型号作为属性的“汽车”类。我有这个班级List<Car> myCars的项目列表。我需要在JSP页面中代表2个下拉列表,一个用于品牌,另一个用于模型,当您选择品牌时,在模型列表中只显示该品牌的那个。我不知道如何以动态的方式做到这一点。

有什么建议从哪里开始?感谢

更新

好的,我现在所做的是在请求中发送一个包含所有品牌名称和项目列表的列表。 JSP代码如下:

<select name="manufacturer" id="id_manufacturer" onchange="return getManufacturer();">
  <option value=""></option>
    <c:forEach items="${manufacturers}" var="man">
       <option value="${man}" >${man}</option>
    </c:forEach>    
</select>

<select name="model" id="id_model">
   <c:forEach items="${mycars}" var="car">
      <c:if test="${car.manufacturer eq man_selected}">
        <option value="${car.id}">${car.model}</option>
      </c:if>
   </c:forEach>    
</select>

<script>
  function getManufacturer()
  {
     man_selected = document.getElementById('id_manufacturer').value;
  }
</script>

如何根据所选的'man_selected'刷新'model'选项?

1 个答案:

答案 0 :(得分:2)

基本上有3种方法可以达到这个目的:

  1. 使用JavaScript在更改下拉列表时将表单提交到服务器端,并让JSP / Servlet根据请求参数加载并显示相应的子下拉列表。从技术上讲,这是最简单的方式,但也是最不方便用户的方式。您可能还想恢复表单的所有其他输入值。

  2. 让JSP填充JavaScript数组中的值,并使用JavaScript函数加载和显示子下拉列表。有点棘手,当然如果你还不了解JavaScript,但这更加用户友好。唯一需要注意的是,当您拥有相对较多的下拉项时,带宽和内存效率低下。

  3. 让JavaScript向服务器端发出异步HTTP请求,并相应地显示子下拉列表。结合最佳选项1和2.高效且用户友好。

  4. 我在这里发布了代码示例的扩展答案:Populating child dropdownlists in JSP/Servlet