Обновите комбинированный список с помощью выбора другого комбинированного списка через JQuery / JS - PullRequest
Новая
       13

Обновите комбинированный список с помощью выбора другого комбинированного списка через JQuery / JS

1 голос
/ 16 февраля 2020

У меня есть проект с JSP + Struts2 + JQuery со следующим функциональным требованием:

У меня есть n Учителя, которые должны быть заменены. Как только 1 учитель выбран как «больной», пользователь должен выбрать 1 коллегу, чтобы заменить его / ее. Но если болеют несколько учителей, пользователь должен выбрать замену для всех из них ... и 1 замена НЕ МОЖЕТ быть в 2 местах одновременно.

Поэтому мне нужно добиться следующего

  • Когда в любом комбинированном ящике выбрана 1 опция, все связанные комбо должны удалить эту опцию из своих списков.
  • И, если какой-либо комбо с выбранным значением сбрасывается на значение по умолчанию (значение = ""), тогда другие комбо должны добавить эту опцию в свои списки.

Сначала верхний код , только ниже 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>

Если вам это нужно, вот код HTML, сгенерированный после стояков2 рендерится: 

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

1 Ответ

0 голосов
/ 17 февраля 2020

Вы можете использовать .filter () из jquery. Этот метод проверит все параметры из другого поля выбора и скроет параметр, который уже выбран. Предположим, вы выбрали 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...