通过 JQuery / JS 使用其他组合框选择更新组合框

Question

我有一个 JSP + Struts2 + JQuery 的项目，具有以下功能要求：

我有 n 位老师需要更换。一旦 1 位老师被 select 编辑为 "Sick"，用户必须选择 1 位同事来替换 him/her。但是，如果不止一位老师生病，则用户必须 select 更换所有老师……并且 1 位更换不能同时出现在 2 个地方。

所以我需要实现以下目标

当在任何组合框中 select 编辑 1 个选项时，所有相关的组合都应从其列表中删除该选项。
并且，如果任何具有 selected 值的组合被重置为默认值（value=""），那么其他组合应该将该选项添加到其列表中。

首先是上面的代码，就在HTML标签下面：

<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>

现在我如何创建组合框：

<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>

如果需要，这里是 struts2 渲染后生成的 HTML 代码：

<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>

最后，这几乎是浏览器作为结果页面的 "source code" 给出的完整 HTML 代码（我删除了菜单和其他次要内容以使其更短和可读):

    <!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="[ProfeASustituir@6f1d1207, ProfeASustituir@2c592e59]" 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="[ProfeASustituir@6f1d1207, ProfeASustituir@2c592e59]" 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!

Answer 1

您可以使用 .filter() 的 jquery.This 方法将检查其他 select 框中的所有选项并隐藏已经存在的选项select编辑。假设您已经 selected Tera 然后这个选项将使用 hide() 方法从其他 select-box 隐藏。工作代码：

$('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>

试试下面的代码片段：

$('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>

通过 JQuery / JS 使用其他组合框选择更新组合框

Update combobox with other's combobox selection through JQuery / JS

javascript

jquery

select

jsp

struts2