Я работаю в проекте с JSP + Struts2 + JQuery со следующим функциональным требованием:
У меня есть n Учителя, которые должны быть заменены. Как только 1 учитель выбран как «больной», пользователь должен выбрать 1 коллегу, чтобы заменить его / ее. Но если болеют несколько учителей, пользователь должен выбрать замену для всех из них ... и 1 замена НЕ МОЖЕТ быть в 2 местах одновременно.
Чтобы достичь этого, я использовал какую-то часть из jQuery код:
$(document).ready(function () {
$('select.selbox1').change(function () {
$('select.selbox1 option').attr('disabled', false);
$('select.selbox1').each(function() {
var valueSelected = $(this).find('option:selected').val();
if (!valueSelected) return;
if(valueSelected == "No needed") return;
$('select.selbox1 option').filter(function() {
return $(this).val() == valueSelected;
}).attr('disabled', 'disabled');
});
});
});
Теперь мне нужно иметь выбранную опцию, отправленную в переменную struts2. Я пытался поместить некоторую скрытую переменную внутрь jQuery, например так:
$("input[name=profeSustitutoPrimera]").val(valueSelected);
или вот так:
$("#profeSustitutoPrimera").val(valueSelected);
без удачи.
Можете ли вы пожалуйста помогите мне сделать это?
Вот обработанная страница HTML, которая генерируется после отправки Struts2 клиенту:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
$('select.selbox1').change(function () {
$('select.selbox1 option').attr('disabled', false);
$('select.selbox1').each(function() {
var valueSelected = $(this).find('option:selected').val();
if (!valueSelected) return;
if(valueSelected == "No needed") return;
$('select.selbox1 option').filter(function() {
return $(this).val() == valueSelected;
}).attr('disabled', 'disabled');
});
});
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilo.css"/>
</head>
<body>
<form id="ListadoSustituciones" name="ListadoSustituciones" action="/TFG_Sustituciones/ListadoSustituciones.action" method="POST">
<input type="hidden" name="fecha" value="20/01/20" id="ListadoSustituciones_fecha"/>
<input type="hidden" name="profeSustituido" value="Juan" id="ListadoSustituciones_profeSustituido"/>
<input type="hidden" name="diaSeleccionado" value="Lunes" id="ListadoSustituciones_diaSeleccionado"/>
<input type="hidden" name="listaProfesASustituir" value="[ProfeASustituir@6f1d1207, ProfeASustituir@2c592e59]" id="ListadoSustituciones_listaProfesASustituir"/>
Sustituciones para <b>Juan</b><br>
<select name="selectbox1" class="selbox1">
<option value="">--- Choose ---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="No needed">No needed</option>
</select>
<br><br><br>
<input type="hidden" name="profeSustituido" value="Robustiano" id="ListadoSustituciones_profeSustituido"/>
<input type="hidden" name="diaSeleccionado" value="Lunes" id="ListadoSustituciones_diaSeleccionado"/>
<input type="hidden" name="listaProfesASustituir" value="[ProfeASustituir@6f1d1207, ProfeASustituir@2c592e59]" id="ListadoSustituciones_listaProfesASustituir"/>
Sustituciones para <b>Robustiano</b><br>
<select name="selectbox2" class="selbox1">
<option value="">--- Choose ---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="No needed">No needed</option>
</select>
<br><br>
<div style="text-align:center;"> <br><input type="submit" id="ListadoSustituciones_0" value="Confirmar Sustitutos"/></div>
</form>
</body>
</html>
EDIT
После использования кода @Swati теперь у меня есть дублированные значения:
A, B, A, B
Именно так: с таким дополнительным пространством между 1-й и 2-й итерацией, верно после записи первого B l oop начинается снова: запятая => дополнительный пробел => A => запятая => B
A, B, _EXTRA-SPACE_A, B
Я мог жить с этим, потому что я могу взять строку, пока не обнаружу этот пробел, но это не лучшее решение, если в опциях есть пробелы (в соответствии с отдельным именем и фамилией) ... и, вероятно, мне придется столкнуться с этим как обычно Поведение данных, поступающих на эти выборки.
Код, на данный момент, где у меня есть дублированные значения в бэкэнде, похож на есть (я удалил другие скрытые поля для более ясного просмотра затронутого кода).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
var list_of_Selected_Values = [];
$(document).ready(function() {
$('select.selbox1').change(function() {
$('select.selbox1 option').attr('disabled', false);
$('select.selbox1').each(function() {
var valueSelected = $(this).find('option:selected').val();
if (!valueSelected) return;
if (valueSelected == "No needed") return;
$('select.selbox1 option').filter(function() {
return $(this).val() == valueSelected;
}).attr('disabled', 'disabled');
});
//to empty array
list_of_Selected_Values.length = 0;
//In the 4 lines bellow you have the attemps I've made to clear hidden field, without luck.
//I left one uncommented and other 3 commented, but none worked :-(
$("#profesPrimera").text("");
//$("#profesPrimera").val("");
//$("input[id=profesPrimera]").text("");
//$("input[id=profesPrimera]").val("");
//loop through all selected values
$(".selbox1 option:selected").each(function() {
if (($(this).val() != "No needed") && ($(this).text() != "--- Choose ---")) {
//adding value in array
list_of_Selected_Values.push($(this).val());
}
});
//putting value in input box
$("input[name=profesPrimera]").val(list_of_Selected_Values);
});
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilo.css"/>
</head>
<body>
<form id="ListadoSustituciones" name="ListadoSustituciones" action="/TFG_Sustituciones/ListadoSustituciones.action" method="POST">
<input type="hidden" name="profesPrimera" value="" id="ListadoSustituciones_profesPrimera"/>
Sustituciones para <b>Juan</b><br>
<select name="selectbox1" class="selbox1">
<option value="">--- Choose ---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="No needed">No needed</option>
</select>
<br><br><br>
<input type="hidden" name="profesPrimera" value="" id="ListadoSustituciones_profesPrimera"/>
Sustituciones para <b>Robustiano</b><br>
<select name="selectbox2" class="selbox1">
<option value="">--- Choose ---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="No needed">No needed</option>
</select>
<br><br>
<div style="text-align:center;"> <br><input type="submit" id="ListadoSustituciones_0" value="Confirmar Sustitutos"/></div>
</form>
</body>
</html>