Home » Jquery » javascript – Update combobox with other's combobox selection through JQuery / JS-Exceptionshub

javascript – Update combobox with other's combobox selection through JQuery / JS-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have a project with JSP + Struts2 + JQuery with the following functional requirement:

I have n Teachers that should be replaced. Once 1 teacher is selected as “Sick” the user must choose 1 colleague to replace him/her.
But, if more than one teacher are sick, the user must select replacement for all of them … and 1 replacement CANNOT be on 2 places at a time.

So I need to achieve the following

  • When 1 option is selected on any combobox, all related combos should remove that option from its lists.
  • And, if any combo with a selected value is reset to default (value=””) then the other combos should add that option to its lists.

First the upper code, just bellow HTML tag:

<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">//<![CDATA[

$(window).load(function(){
$(function(){
    $('.selbox1').change(function(){
    var val = $(this).val();
    var sel = $(this);

    if(val !== ""){
       if(sel.data("selected")){   
           var oldval = sel.data("selected");               
           sel
           .siblings('select')
           .append($('<option/>').attr("value", oldval).text(oldval));
       }
         sel
        .data("selected", val)
        .siblings('select')
        .children('option[value=' + val + ']')
        .remove();
    }
    else if(val === ""){
        if(sel.data("selected")){   
           var oldval = sel.data("selected");              
           sel
           .removeData("selected")
           .siblings('select')
           .append($('<option/>').attr("value", oldval).text(oldval));
       }
    }
    });
});
});

//]]></script>

And now how I create the combobox:

<s:iterator value="listaProfesASustituir" var="listaSustitucionesAInsertar" status="listaProfesASustituirStatus">  
    <select name="selectbox<s:property value='#listaProfesASustituirStatus.index'/>" class="selbox1">
        <option value="">--- Selecciona Profesor ---</option>
        <s:iterator value="profesPrimera" status="profesPrimeraStatus">
            <option value="<s:property />"><s:property /></option>    
        </s:iterator>
    </select>
</s:iterator>

If you need it, here is the HTML code generated after the struts2 is rendered:

<select name="selectbox1" class="selbox1">
    <option value="">--- Selecciona Profesor ---</option>
    <option value="Tera">Tera</option>    
    <option value="No necesita sustituci&oacute;n.">No necesita sustituci&oacute;n.</option>    
</select>
<select name="selectbox2" class="selbox1">
    <option value="">--- Selecciona Profesor ---</option>
    <option value="Tera">Tera</option>  
    <option value="No necesita sustituci&oacute;n.">No necesita sustituci&oacute;n.</option>    
</select>

Finally, here is almost the complete HTML code that the browser is giving as “source code” of the resulting page (I’ve removed the menu and other minor stuff to make it shorter and readable):

    <!DOCTYPE html>
<html>
<head>  
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(function(){
$('.selbox1').change(function(){
var val = $(this).val();
var sel = $(this);
if(val !== ""){
if(sel.data("selected")){   
var oldval = sel.data("selected");              
sel
.siblings('select')
.append($('<option/>').attr("value", oldval).text(oldval));
}
sel
.data("selected", val)
.siblings('select')
.children('option[value=' + val + ']')
.remove();
}
else if(val === ""){
if(sel.data("selected")){   
var oldval = sel.data("selected");             
sel
.removeData("selected")
.siblings('select')
.append($('<option/>').attr("value", oldval).text(oldval));
}
}
});
});
});
//]]></script>
<title>Administración: Sustituciones</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilo.css"/>
</head>
<body>
<div id="leyenda">Sustituciones para el Lunes 20/01/20</div>
<div id="alta"> 
<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="[[email protected], [email protected]]" id="ListadoSustituciones_listaProfesASustituir"/>
<table>
<thead>
<tr><td colspan="3"> Sustituciones para <b>Juan</b></td></tr>
<tr>
<td>Hora</td>
<td id="nowrap">Profesor Propuesto</td>
<td id="nowrap">Profesor Sustituto</td>
</tr>
</thead>
<tbody>
<tr>
<td class='centrado'>1ª</td>
<td class="centrado" id="nowrap">Locuaz</td>
<td class='centrado'>
<select name="selectbox1" class="selbox1">
<option value="">--- Selecciona Profesor ---</option>
<option value="Tera">Tera</option>  
<option value="No necesita sustituci&oacute;n.">No necesita sustituci&oacute;n.</option>    
</select>
</td>
</tr>
<tr>
<td class='centrado'>2ª</td>
<td id="nowrap" class="centrado" colspan="2">No tiene clase.</td>
<input type="hidden" name="profeSustitutoSegunda" value="No tiene clase." id="ListadoSustituciones_profeSustitutoSegunda"/>
</tr>
<tr>
<td class='centrado'>3ª</td>
<td id="nowrap" class="centrado" colspan="2">Se pierde apoyo.</td>
<input type="hidden" name="profeSustitutoTercera" value="Se pierde apoyo." id="ListadoSustituciones_profeSustitutoTercera"/>
</tr>
<tr>
<td class='centrado'>4ª</td>
<td id="nowrap" class="centrado" colspan="2">Se pierde apoyo.</td>
<input type="hidden" name="profeSustitutoCuarta" value="Se pierde apoyo." id="ListadoSustituciones_profeSustitutoCuarta"/>
</tr>
<tr>
<td class='centrado'>5ª</td>
<td id="nowrap" class="centrado" colspan="2">Se pierde apoyo.</td>
<input type="hidden" name="profeSustitutoQuinta" value="Se pierde apoyo." id="ListadoSustituciones_profeSustitutoQuinta"/>
</tr>
<tr>
<td class='centrado'>6ª</td>
<td id="nowrap" class="centrado" colspan="2">Se pierde apoyo.</td>
<input type="hidden" name="profeSustitutoSexta" value="Se pierde apoyo." id="ListadoSustituciones_profeSustitutoSexta"/>
</tr>
</tbody>
</table>
<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="[[email protected], [email protected]]" id="ListadoSustituciones_listaProfesASustituir"/>
<table>
<thead>
<tr><td colspan="3"> Sustituciones para <b>Robustiano</b></td></tr>
<tr>
<td>Hora</td>
<td id="nowrap">Profesor Propuesto</td>
<td id="nowrap">Profesor Sustituto</td>
</tr>
</thead>
<tbody>
<tr>
<td class='centrado'>1ª</td>
<td class="centrado" id="nowrap">fulanito</td>
<td class='centrado'>
<select name="selectbox2" class="selbox1">
<option value="">--- Selecciona Profesor ---</option>
<option value="Tera">Tera</option>  
<option value="No necesita sustituci&oacute;n.">No necesita sustituci&oacute;n.</option>    
</select>
</td>
</tr>
<tr>
<td class='centrado'>2ª</td>
<td class="centrado" id="nowrap">fulanito</td>
<td class='centrado'>
<select name="profeSustitutoSegunda" id="ListadoSustituciones_profeSustitutoSegunda" required="true">
<option value="">--- Selecciona Profesor ---</option>
<option value="fulanito">fulanito</option>
<option value="Tera">Tera</option>
<option value="Lingüista">Lingüista</option>
<option value="No necesita sustitución.">No necesita sustitución.</option>
</select>
</td>
</tr>
<tr>
<td class='centrado'>3ª</td>
<td class="centrado" id="nowrap">fulanito</td>
<td class='centrado'>
<select name="profeSustitutoTercera" id="ListadoSustituciones_profeSustitutoTercera" required="true">
<option value="">--- Selecciona Profesor ---</option>
<option value="fulanito">fulanito</option>
<option value="Lingüista">Lingüista</option>
<option value="Locuaz">Locuaz</option>
<option value="Luis">Luis</option>
<option value="Tera">Tera</option>
<option value="No necesita sustitución.">No necesita sustitución.</option>
</select>
</td>
</tr>
<tr>
<td class='centrado'>4ª</td>
<td class="centrado" id="nowrap">fulanito</td>
<td class='centrado'>
<select name="profeSustitutoCuarta" id="ListadoSustituciones_profeSustitutoCuarta" required="true">
<option value="">--- Selecciona Profesor ---</option>
<option value="fulanito">fulanito</option>
<option value="Lingüista">Lingüista</option>
<option value="Locuaz">Locuaz</option>
<option value="Luis">Luis</option>
<option value="Tera">Tera</option>
<option value="No necesita sustitución.">No necesita sustitución.</option>
</select>
</td>
</tr>
<tr>
<td class='centrado'>5ª</td>
<td class="centrado" id="nowrap">fulanito</td>
<td class='centrado'>
<select name="profeSustitutoQuinta" id="ListadoSustituciones_profeSustitutoQuinta" required="true">
<option value="">--- Selecciona Profesor ---</option>
<option value="fulanito">fulanito</option>
<option value="Lingüista">Lingüista</option>
<option value="Locuaz">Locuaz</option>
<option value="Luis">Luis</option>
<option value="Tera">Tera</option>
<option value="No necesita sustitución.">No necesita sustitución.</option>
</select>
</td>
</tr>
<tr>
<td class='centrado'>6ª</td>
<td class="centrado" id="nowrap">fulanito</td>
<td class='centrado'>
<select name="profeSustitutoSexta" id="ListadoSustituciones_profeSustitutoSexta" required="true">
<option value="">--- Selecciona Profesor ---</option>
<option value="fulanito">fulanito</option>
<option value="Lingüista">Lingüista</option>
<option value="Locuaz">Locuaz</option>
<option value="Luis">Luis</option>
<option value="Tera">Tera</option>
<option value="No necesita sustitución.">No necesita sustitución.</option>
</select>
</td>
</tr>
</tbody>
</table>
<br><br>
<div style="text-align:center;"> <br><input type="submit" id="ListadoSustituciones_0" value="Confirmar Sustitutos"/></div>
</form>
</div>   
</body>
</html>
Thanks in advance!
How to&Answer:

You can use .filter() of jquery.This method will check all the option from other select box and hide the option which is already selected.
Suppose you have selected Tera then this option will get hide from other select-box using hide() method . Working code :

$('select').change(function() { var oldvar = $(this).attr('data-old') !== typeof undefined ? $(this).attr('data-old') : ""; var newval = $("option:selected", this).val(); //adding data-old attribute to select $(this).attr('data-old', newval); var val = $(this).val(); var sel = $(this); if (val != "") { var otherselects = $('select').not(this).find('option'); //checking if the value of other select option is same if yes then hide them otherselects.filter(function() { return $(this).text() == val; }).hide(); } else if (val == "") { //showing option which is deselected by current select-box $('select').not(this).find('option[value="' + oldvar + '"]').show(); } });
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> </head> <body> <table> <thead> <tr> <td colspan="3"> Sustituciones para <b>Robustiano</b></td> </tr> <tr> <td>Hora</td> <td id="nowrap">Profesor Propuesto</td> <td id="nowrap">Profesor Sustituto</td> </tr> </thead> <tbody> <tr> <td class='centrado'>1ª</td> <td class="centrado" id="nowrap">fulanito</td> <td class='centrado'> <select name="selectbox2" class="selbox1"> <option value="">--- Selecciona Profesor ---</option> <option value="Tera">Tera</option> <option value="No necesita sustituci&oacute;n.">No necesita sustituci&oacute;n.</option> </select> </td> </tr> <tr> <td class='centrado'>2ª</td> <td class="centrado" id="nowrap">fulanito</td> <td class='centrado'> <select name="profeSustitutoSegunda" id="ListadoSustituciones_profeSustitutoSegunda" required="true"> <option value="">--- Selecciona Profesor ---</option> <option value="fulanito">fulanito</option> <option value="Tera">Tera</option> <option value="Lingüista">Lingüista</option> <option value="No necesita sustitución.">No necesita sustitución.</option> </select> </td> </tr> <tr> <td class='centrado'>3ª</td> <td class="centrado" id="nowrap">fulanito</td> <td class='centrado'> <select name="profeSustitutoTercera" id="ListadoSustituciones_profeSustitutoTercera" required="true"> <option value="">--- Selecciona Profesor ---</option> <option value="fulanito">fulanito</option> <option value="Lingüista">Lingüista</option> <option value="Locuaz">Locuaz</option> <option value="Luis">Luis</option> <option value="Tera">Tera</option> <option value="No necesita sustitución.">No necesita sustitución.</option> </select> </td> </tr> <tr> <td class='centrado'>4ª</td> <td class="centrado" id="nowrap">fulanito</td> <td class='centrado'> <select name="profeSustitutoCuarta" id="ListadoSustituciones_profeSustitutoCuarta" required="true"> <option value="">--- Selecciona Profesor ---</option> <option value="fulanito">fulanito</option> <option value="Lingüista">Lingüista</option> <option value="Locuaz">Locuaz</option> <option value="Luis">Luis</option> <option value="Tera">Tera</option> <option value="No necesita sustitución.">No necesita sustitución.</option> </select> </td> </tr> <tr> <td class='centrado'>5ª</td> <td class="centrado" id="nowrap">fulanito</td> <td class='centrado'> <select name="profeSustitutoQuinta" id="ListadoSustituciones_profeSustitutoQuinta" required="true"> <option value="">--- Selecciona Profesor ---</option> <option value="fulanito">fulanito</option> <option value="Lingüista">Lingüista</option> <option value="Locuaz">Locuaz</option> <option value="Luis">Luis</option> <option value="Tera">Tera</option> <option value="No necesita sustitución.">No necesita sustitución.</option> </select> </td> </tr> <tr> <td class='centrado'>6ª</td> <td class="centrado" id="nowrap">fulanito</td> <td class='centrado'> <select name="profeSustitutoSexta" id="ListadoSustituciones_profeSustitutoSexta" required="true"> <option value="">--- Selecciona Profesor ---</option> <option value="fulanito">fulanito</option> <option value="Lingüista">Lingüista</option> <option value="Locuaz">Locuaz</option> <option value="Luis">Luis</option> <option value="Tera">Tera</option> <option value="No necesita sustitución.">No necesita sustitución.</option> </select> </td> </tr> </tbody> </table> </body> </html>

Try below code snippet :

$('select').change(function() { var oldvar = $(this).attr('data-old') !== typeof undefined ? $(this).attr('data-old') : ""; var newval = $("option:selected", this).val(); //adding data-old attribute to select $(this).attr('data-old', newval); var val = $(this).val(); var sel = $(this); if (val != "") { var otherselects = $('select').not(this).find('option'); //checking if the value of other select option is same if yes then hide them otherselects.filter(function() { return $(this).text() == val; }).hide(); //add this $('select').not(this).find('option[value="' + oldvar + '"]').show(); } else if (val == "") { //showing option which is deselected by current select-box $('select').not(this).find('option[value="' + oldvar + '"]').show(); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <select> <option value="">--- Select ---</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="">--- Select ---</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>