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

问题描述 投票：1回答：1

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

我有n应该更换的老师。一旦1位老师被选为“病假”，用户必须选择1位同事来替换他/她。但是，如果一位以上的老师生病了，则用户必须为所有老师选择替换...并且不能一次在2个位置上替换1个。

所以我需要实现以下目的

  • 在任意组合框上选择1个选项时，所有相关的组合都应从列表中删除该选项。
  • 并且，如果任何具有选定值的组合都被重置为默认值（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>

最后，这几乎是浏览器提供的完整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!
javascript jquery jsp select struts2
1个回答
0
投票

您可以使用jquery的.filter()。此方法将检查其他选择框中的所有选项，并隐藏已选择的选项。假设您已选择Tera，则此选项将使用select-box方法从其他hide()中隐藏。工作代码：

$('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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.