根据在另一个组合框中选择的内容，使用Map中的值动态填充组合框
时间：2020-03-06 14:58:07 来源:igfitidea点击:
好的，这是Java / JavaScript专家的一个：
在我的应用程序中，一个控制器将TreeMap传递给它的JSP。该地图以汽车制造商的名称作为键，以汽车对象的列表作为值。这些Car对象是简单的bean，其中包含汽车的名称，id，生产年份等。
因此，地图看起来像这样(这只是一个示例，需要澄清一些内容)：
钥匙：保时捷
值：包含三个Car对象的列表(例如911，Carrera，Boxter及其可观的生产年份和ID)
关键：菲亚特
值：包含两个Car对象的列表(例如，Punto和Uno)
等等...
现在，在我的JSP中，我有两个组合框。一个应该收到汽车制造商的列表(我从地图上知道钥匙的位置，我知道该怎么做)，而另一个应该动态更改以在用户从第一个组合框中选择某个制造商时显示汽车的名称。因此，例如，用户在第一个组合框中选择"保时捷"，第二个立即显示" 911，Carrera，Boxter" ...
在花了几天的时间试图找出解决办法之后，我准备承认失败。我尝试了许多不同的方法，但是每次碰到墙壁时都会碰到一面。有人可以建议我该如何处理吗？
是的，如果有人在想，我是JavaScript新手。
编辑：我已经将其重新标记为代码挑战。对于不使用任何JavaScript框架(例如JQuery)即可解决此问题的任何人，都表示感谢。
解决方案
我们在使用Struts吗？
我们将需要一些JavaScript技巧(或者AJAX)来完成此操作。
我们需要做的是在JavaScript代码中的某个位置(暂不介绍如何生成该代码)：
var map = {
'porsche': [ 'boxter', '911', 'carrera' ],
'fiat': ['punto', 'uno']
};
这基本上是服务器端数据结构的副本，即由制造商键入的地图，每个值都有一系列汽车类型。
然后，在针对制造商的onchange事件中，我们需要从上面定义的映射中获取数组，然后从中创建选项列表。 (查看devguru.com，其中包含许多有关标准JavaScript对象的有用信息)。
但是，根据汽车清单的大小，最好走AJAX路线。
我们需要创建一个新的控制器，该控制器查找给定制造商的汽车类型列表，然后继续到返回JSON的JSP(它不一定是JSON，但对我来说很好用)。
然后，使用jQuery之类的库来检索onchange事件中的汽车列表以获取制造商列表。 (jQuery是一个出色的JavaScript框架，要知道它确实使使用JavaScript的开发容易得多。文档非常好)。
我希望其中一些有意义吗？
使用原型怎么样？首先，选择类别类别：
<SELECT onchange="changeCategory(this.options[this.selectedIndex].value); return false;"> <OPTION value="#categoryID#">#category#</OPTION> ...
然后，我们输出N个不同的选择框，每个子类别一个：
<SELECT name="myFormVar" class="categorySelect"> ...
changeCategory javascript函数会禁用类别categorySelect的所有选择，然后仅为我们当前的categoryID启用一个选择。
// Hide all category select boxes except the new one
function changeCategory(categoryID) {
$$("select.categorySelect").each(function (select) {
select.hide();
select.disable();
});
$(categoryID).show();
$(categoryID).enable();
}
当我们在原型中像这样隐藏/禁用时，它不仅将其隐藏在页面上，还将阻止该FORM变量发布。因此，即使我们有N个具有相同FORM变量名称(myFormVar)的选择，也只有活动的一个发布。
不久前，我想到了类似的东西。
使用jQuery和TexoTela添加组件并没有那么困难。
首先，我们有一个像上面提到的地图这样的数据结构：
var map = {
'porsche': [ 'boxter', '911', 'carrera' ],
'fiat': ['punto', 'uno']
};
HTML看起来应类似于：
<select size="4" id="manufacturers"> </select> <select size="4" id="models"> </select>
然后，用第一个jQuery代码填充第一个组合：
$(document).ready(
function() {
$("#bronsysteem").change( manufacturerSelected() );
} );
);
其中ManufacturerSelected是在onChange事件上注册的回调
function manufacturerSelected() {
newSelection = $("#manufacturers").selectedValues();
if (newSelection.length != 1) {
alert("Expected a selection!");
return;
}
newSelection = newSelection[0];
fillModels(newSelection);
}
function fillModels(manufacterer) {
var models = map[manufacturer];
$("models").removeOption(/./); // Empty combo
for(modelId in models) {
model = models[modelId];
$("models").addOption(model,model); // Value, Text
}
}
这应该可以解决问题。
请注意，其中可能存在语法错误；我已经编辑了代码以反映用例，并且不得不删除
很多很多。
如果这有帮助，我将不胜感激。
作为我以前的帖子的附件；我们可以在JSP中放置一个脚本标记，以在地图上进行迭代。在Struts中的地图中可以找到有关迭代地图的示例。
我想实现的目标(如果我们不关心表单提交的话)是：
<script>
var map = {
<logic:iterate id="entry" name="myForm" property="myMap">
'<bean:write name=" user" property="key"/>' : [
<logic:iterate id="model" name="entry" property="value">
'<bean:write name=" model" property="name"/>' ,
</logic:iterate>
] ,
</logic:iterate>
};
</script>
我们仍然希望避免使用一些多余的""，但是我认为这应该可以解决问题。
我只是喜欢挑战。
没有jQuery，只有普通的javascript，在Safari上进行了测试。
我想提前添加以下备注：
- 由于发生错误检查，因此出现故障的时间很长。
- 生成了两个部分：具有Map和制造商SELECT内容的第一个脚本节点
- 在"我的机器"(TM)上工作(Safari / OS X)
- 没有应用(css)样式。我的味道不好，所以反正没用。
。
<body>
<script>
// DYNAMIC
// Generate in JSP
// You can put the script tag in the body
var modelsPerManufacturer = {
'porsche' : [ 'boxter', '911', 'carrera' ],
'fiat': [ 'punto', 'uno' ]
};
</script>
<script>
// STATIC
function setSelectOptionsForModels(modelArray) {
var selectBox = document.myForm.models;
for (i = selectBox.length - 1; i>= 0; i--) {
// Bottom-up for less flicker
selectBox.remove(i);
}
for (i = 0; i< modelArray.length; i++) {
var text = modelArray[i];
var opt = new Option(text,text, false, false);
selectBox.add(opt);
}
}
function setModels() {
var index = document.myForm.manufacturer.selectedIndex;
if (index == -1) {
return;
}
var manufacturerOption = document.myForm.manufacturer.options[index];
if (!manufacturerOption) {
// Strange, the form does not have an option with given index.
return;
}
manufacturer = manufacturerOption.value;
var modelsForManufacturer = modelsPerManufacturer[manufacturer];
if (!modelsForManufacturer) {
// This modelsForManufacturer is not in the modelsPerManufacturer map
return; // or alert
}
setSelectOptionsForModels(modelsForManufacturer);
}
function modelSelected() {
var index = document.myForm.models.selectedIndex;
if (index == -1) {
return;
}
alert("You selected " + document.myForm.models.options[index].value);
}
</script>
<form name="myForm">
<select onchange="setModels()" id="manufacturer" size="5">
<!-- Options generated by the JSP -->
<!-- value is index of the modelsPerManufacturer map -->
<option value="porsche">Porsche</option>
<option value="fiat">Fiat</option>
</select>
<select onChange="modelSelected()" id="models" size="5">
<!-- Filled dynamically by setModels -->
</select>
</form>
</body>
这是一个在jsp中有效，可剪切并粘贴的答案，没有任何标记库或者任何外部依赖项。具有模型的地图是经过硬编码的，但不应造成任何问题。
我将这个答案与以前的答案分开了，因为添加的JSP不能提高可读性。在"现实生活"中，我不会为JSP负担所有嵌入式逻辑，而是将其放在某个地方的类中。或者使用标签。
所有"第一"的东西都是为了防止在生成的代码中出现超级""。使用foreach不会给我们任何有关元素数量的知识，因此我们需要检查最后一个。我们还可以跳过生成器的长度减1，然后跳过第一个元素的处理，然后删除最后一个""。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.Map"%>
<%@page import="java.util.TreeMap"%>
<%@page import="java.util.Arrays"%>
<%@page import="java.util.Collection"%>
<%@page import="java.util.List"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Challenge</title>
</head>
<body onload="setModels()">
<% // You would get your map some other way.
Map<String,List<String>> map = new TreeMap<String,List<String>>();
map.put("porsche", Arrays.asList(new String[]{"911", "Carrera"}));
map.put("mercedes", Arrays.asList(new String[]{"foo", "bar"}));
%>
<%! // You may wish to put this in a class
public String modelsToJavascriptList(Collection<String> items) {
StringBuilder builder = new StringBuilder();
builder.append('[');
boolean first = true;
for (String item : items) {
if (!first) {
builder.append(',');
} else {
first = false;
}
builder.append('\'').append(item).append('\'');
}
builder.append(']');
return builder.toString();
}
public String mfMapToString(Map<String,List<String>> mfmap) {
StringBuilder builder = new StringBuilder();
builder.append('{');
boolean first = true;
for (String mf : mfmap.keySet()) {
if (!first) {
builder.append(',');
} else {
first = false;
}
builder.append('\'').append(mf).append('\'');
builder.append(" : ");
builder.append( modelsToJavascriptList(mfmap.get(mf)) );
}
builder.append("};");
return builder.toString();
}
%>
<script>
var modelsPerManufacturer =<%= mfMapToString(map) %>
function setSelectOptionsForModels(modelArray) {
var selectBox = document.myForm.models;
for (i = selectBox.length - 1; i>= 0; i--) {
// Bottom-up for less flicker
selectBox.remove(i);
}
for (i = 0; i< modelArray.length; i++) {
var text = modelArray[i];
var opt = new Option(text,text, false, false);
selectBox.add(opt);
}
}
function setModels() {
var index = document.myForm.manufacturer.selectedIndex;
if (index == -1) {
return;
}
var manufacturerOption = document.myForm.manufacturer.options[index];
if (!manufacturerOption) {
// Strange, the form does not have an option with given index.
return;
}
manufacturer = manufacturerOption.value;
var modelsForManufacturer = modelsPerManufacturer[manufacturer];
if (!modelsForManufacturer) {
// This modelsForManufacturer is not in the modelsPerManufacturer map
return; // or alert
}
setSelectOptionsForModels(modelsForManufacturer);
}
function modelSelected() {
var index = document.myForm.models.selectedIndex;
if (index == -1) {
return;
}
alert("You selected " + document.myForm.models.options[index].value);
}
</script>
<form name="myForm">
<select onchange="setModels()" id="manufacturer" size="5">
<% boolean first = true;
for (String mf : map.keySet()) { %>
<option value="<%= mf %>" <%= first ? "SELECTED" : "" %>><%= mf %></option>
<% first = false;
} %>
</select>
<select onChange="modelSelected()" id="models" size="5">
<!-- Filled dynamically by setModels -->
</select>
</form>
</body>
</html>
好吧，正如我所说，我终于设法自己完成了，所以这就是我的答案...
我从控制器这样收到地图(我正在使用Spring，不知道它如何与其他框架一起工作)：
<c:set var="manufacturersAndModels" scope="page" value="${MANUFACTURERS_AND_MODELS_MAP}"/>
这些是我的连击：
<select id="manufacturersList" name="manufacturersList" onchange="populateModelsCombo(this.options[this.selectedIndex].index);" >
<c:forEach var="manufacturersItem" items="<%= manufacturers%>">
<option value='<c:out value="${manufacturersItem}" />'><c:out value="${manufacturersItem}" /></option>
</c:forEach>
</select>
select id="modelsList" name="modelsList"
<c:forEach var="model" items="<%= models %>" >
<option value='<c:out value="${model}" />'><c:out value="${model}" /></option>
</c:forEach>
</select>
我导入了以下类(某些名称当然已更改)：
<%@ page import="org.mycompany.Car,java.util.Map,java.util.TreeMap,java.util.List,java.util.ArrayList,java.util.Set,java.util.Iterator;" %>
这是完成所有艰苦工作的代码：
<script type="text/javascript">
<%
Map mansAndModels = new TreeMap();
mansAndModels = (TreeMap) pageContext.getAttribute("manufacturersAndModels");
Set manufacturers = mansAndModels.keySet(); //We'll use this one to populate the first combo
Object[] manufacturersArray = manufacturers.toArray();
List cars;
List models = new ArrayList(); //We'll populate the second combo the first time the page is displayed with this list
//initial second combo population
cars = (List) mansAndModels.get(manufacturersArray[0]);
for(Iterator iter = cars.iterator(); iter.hasNext();) {
Car car = (Car) iter.next();
models.add(car.getModel());
}
%>
function populateModelsCombo(key) {
var modelsArray = new Array();
//Here goes the tricky part, we populate a two-dimensional javascript array with values from the map
<%
for(int i = 0; i < manufacturersArray.length; i++) {
cars = (List) mansAndModels.get(manufacturersArray[i]);
Iterator carsIterator = cars.iterator();
%>
singleManufacturerModelsArray = new Array();
<%
for(int j = 0; carsIterator.hasNext(); j++) {
Car car = (Car) carsIterator.next();
%>
singleManufacturerModelsArray[<%= j%>] = "<%= car.getModel()%>";
<%
}
%>
modelsArray[<%= i%>] = singleManufacturerModelsArray;
<%
}
%>
var modelsList = document.getElementById("modelsList");
//Empty the second combo
while(modelsList.hasChildNodes()) {
modelsList.removeChild(modelsList.childNodes[0]);
}
//Populate the second combo with new values
for (i = 0; i < modelsArray[key].length; i++) {
modelsList.options[i] = new Option(modelsArray[key][i], modelsArray[key][i]);
}
}
