html/js: 刷新“选择”选项
有一个以品牌和型号为属性的“汽车”类。我有一个此类的项目列表 List。我需要在 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”选择选项？
There's a class 'Car' with brand and model as properties. I have a list of items of this class List<Car> myCars. I need to represent 2 dropdowns in a JSP page, one for brand and another for model, that when you select the brand, in the model list only appear the ones from that brand. I don't know how to do this in a dynamic way.
Any suggestion on where to start?
Update
Ok, what I do now is send in the request a list with all the brand names, and a list of the items. The JSP code is like:
<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>
How do I do to refresh the 'model' select options according to the selected 'man_selected' ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
基本上有 3 种方法可以实现此目的：
在下拉列表更改时使用 JavaScript 将表单提交到服务器端，并让 JSP/Servlet 根据请求参数相应地加载和显示子下拉列表。从技术上讲是最简单的方法，但也是对用户最不友好的方法。您可能还想恢复表单的所有其他输入值。
让 JSP 填充 JavaScript 数组中的值，并使用 JavaScript 函数加载和显示子下拉列表。如果您还不了解 JavaScript，当然会有点棘手，但这对用户更友好。唯一需要注意的是，当您有相对较多的下拉项时，这会导致带宽和内存效率低下。
让 JavaScript 向服务器端发起异步 HTTP 请求并相应地显示子下拉列表。结合了选项 1 和 2 的优点。高效且用户友好。
我在这里发布了带有代码示例的扩展答案： 在 JSP/Servlet 中填充子下拉列表< /a>.
There are basically 3 ways to achieve this:
Use JavaScript to submit the form to the server side on change of the dropdown and let the JSP/Servlet load and display the child dropdown accordingly based on the request parameter. Technically the simplest way, but also the least user friendly way. You probably also want to revive all other input values of the form.
Let JSP populate the values in a JavaScript array and use a JavaScript function to load and display the child dropdown. A little bit trickier, certainly if you don't know JavaScript yet, but this is more user friendly. Only caveat is that this is bandwidth and memory inefficient when you have relatively a lot of dropdown items.
Let JavaScript fire an asynchronous HTTP request to the server side and display the child dropdown accordingly. Combines the best of options 1 and 2. Efficient and user friendly.
I've posted an extended answer with code samples here: Populating child dropdownlists in JSP/Servlet.