Dynamicaly填充的组合框值从一个基于地图上有什么选择在另一个组合框
https://stackoverflow.com/questions/156852
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
好的，这里有一个Java/JavaScript大师:
在我的应用程序，其中一个控制器穿树形图，这是JSP。这个地图有汽车制造商的名称和钥匙和列表的汽车为对象的价值观。这些汽车的对象是简单的豆含有汽车的名称、标识、生产年份等。因此，在地图上看起来像这样的东西(这只是一个例子，为了澄清事情有点):
关键：保时捷
价值：列表，包含三个汽车的对象(例如911,Carrera Boxter与他们的尊敬年的生产和ids)
关键：菲亚特
价值：名单含有两辆车的对象(例如，Punto和Uno)
等等...
现在，在我JSP我有两个组合框.一个应该得到一个清单的汽车制造商(键从地图的这部分我知道该怎么做)，而另一个应该 dynamicaly改变 要显示在名称的汽车用户选择一个某些生产商从第一组合框。因此，例如，用户选择的"保时捷"的第一组合框，和第二会立即显示"911,Carrera Boxter"...
后花费了两天，试图找出如何做到这一点，我已经准备好承认失败。我尝试了很多不同的东西，但每次我碰了壁somewehere。任何人都可以建议我应该怎么处理这个吗？是的，我是一个JavaScript新手，如果有人想知道...
编辑：我已经重新标记这一代的挑战。荣誉的任何人解决了这一一个没有使用任何JavaScript框架(如JQuery).
解决方案 2
嗯，无论如何，正如我所说的那样，我终于自己做到了，所以这是我的答案......
我从我的控制器那里收到地图（我正在使用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]);
}
}
其他提示
我只是喜欢一个挑战。
没有jQuery，只是普通的javascript、测试野生动物园。
我想添加以下评论提前：
- 这是切faily长由于错误 检查。
- 两个部分都产生的；第一个脚本节点的地图 和内容的manufacterer 选择
- 在我的机器上(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>
您使用的是Struts吗？
你需要一些JavaScript技巧（或AJAX）来实现这一目标。
您需要做的是，在您的JavaScript代码中的某处（暂时不管您如何生成它）：
var map = {
'porsche': [ 'boxter', '911', 'carrera' ],
'fiat': ['punto', 'uno']
};
这基本上是服务器端数据结构的副本，即制造商键入的地图，每个值都有一系列汽车类型。
然后，在制造商的onchange事件中，您需要从上面定义的地图中获取数组，然后从中创建一个选项列表。 （查看devguru.com - 它有很多关于标准JavaScript对象的有用信息）。
根据您的汽车列表有多大，最好采用AJAX路线。
您需要创建一个新的控制器，查找给定制造商的汽车类型列表，然后转发到返回 JSON （它不一定是JSON，但对我来说效果很好）。
然后，使用 jQuery 等库来检索onchange事件列表中的汽车列表。制造商。 （jQuery是一个很好的JavaScript框架，它可以让JavaScript更容易开发。文档非常好。）
我希望其中一些有意义吗？
这是jsp中一个工作，剪切和粘贴的答案，没有任何标记库或外部依赖项。带有模型的地图是硬编码的，但不应该造成任何问题。
我将此答案与之前的答案分开，因为添加的JSP不会提高可读性。在'现实生活'中，我不会用所有嵌入式逻辑加载我的JSP，而是将它放在某个类的某个类中。或者使用标签。
所有这些“第一次”东西是为了防止超级“，”在生成的代码中。使用foreach dos不会让你知道元素的数量，所以你检查最后。您也可以跳过第一个元素处理并删除最后一个“，”。然后将构建器长度减少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>
使用原型怎么样？首先，您选择的类别框：
<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>
你还有一些超级的“，”您可能希望阻止，但我认为这应该可以解决问题。
不隶属于 StackOverflow
