Динамическое заполнение поля со списком значениями из карты на основе того, что выбрано в другом поле со списком.
-
03-07-2019 - |
Вопрос
Хорошо, вот для гуру Java/JavaScript:
В моем приложении один из контроллеров передает TreeMap в свой JSP.На этой карте названия производителей автомобилей представлены в качестве ключей, а списки объектов автомобилей — в качестве значений.Эти объекты Car представляют собой простые bean-компоненты, содержащие название, идентификатор, год выпуска автомобиля и т. д.Итак, карта выглядит примерно так (это просто пример, чтобы немного прояснить ситуацию):
Ключ:Порше
Ценить:Список, содержащий три объекта «Автомобиль» (например, 911, Carrera, Boxter с указанием года выпуска и идентификаторов).
Ключ:Фиат
Ценить:Список, содержащий два объекта Car (например, Punto и Uno)
и т. д...
Теперь в моем JSP у меня есть два поля со списком.Один должен получить список производителей автомобилей(ключи от карты - эту часть я умею делать), а другой должен динамически изменять для отображения названий автомобилей, когда пользователь выбирает определенного производителя из первого поля со списком.Так, например, пользователь выбирает в первом комбобоксе «Порше», а во втором сразу отображается «911, Carrera, Boxter»…
Потратив пару дней на то, чтобы выяснить, как это сделать, я готов признать поражение.Я пробовал много разных вещей, но каждый раз где-то натыкался на стену.Может ли кто-нибудь подсказать, как мне подойти к этому?Да, я новичок в 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, протестированный в Safari.
Заранее хотелось бы добавить следующие замечания:
- Это неудачное долгое время из -за проверки ошибок.
- Создаются две части;Первый узел сценария с картой и содержимым выбора изготовления из мануфактора
- Работает на моей машине (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.
Вам нужно будет создать новый контроллер, который просматривает список типов автомобилей, заданных производителем, а затем пересылает его на JSP, который возвращает JSON (это не обязательно должен быть JSON, но меня это вполне устраивает).
Затем используйте библиотеку, например jQuery чтобы получить список автомобилей в вашем событии onchange для списка производителей.(jQuery — это отличная среда JavaScript, которую стоит знать: она значительно упрощает разработку с использованием JavaScript.Документация очень хорошая).
Надеюсь, что-то из этого имеет смысл?
Вот рабочий ответ «вырезать и вставить» в 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>
Как насчет чего-то подобного, используя прототип?Сначала выберите поле категорий:
<SELECT onchange="changeCategory(this.options[this.selectedIndex].value); return false;">
<OPTION value="#categoryID#">#category#</OPTION>
...
Затем вы выводите N различных полей выбора, по одному для каждой подкатегории:
<SELECT name="myFormVar" class="categorySelect">
...
Ваша функция javascript ChangeCategory отключает все выборы с помощью класса CategorySelect, а затем включает только один для вашего текущего идентификатора категории.
// 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() );
} );
);
где производительВыбранный — обратный вызов, зарегистрированный в событии 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, где вы перебираете карту.Пример перебора карт можно найти в Карты в Струтсе.
Чего вы хотели бы достичь (если вас не волнует отправка формы), я думаю, что-то вроде:
<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>
У вас все еще есть лишние "," которые вы, возможно, захотите предотвратить, но я думаю, что это должно сработать.