时间戳

首页 > 解决方案 > 选择 Struts2 中的 jQuery 选项

jquery - 选择 Struts2 中的 jQuery 选项

问题描述

我正在使用具有以下功能要求的 JSP + Struts2 + JQuery 的项目工作：

我有n名教师需要更换。一旦 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);

没有任何运气。

你能帮我完成这件事吗？

这是 Struts2 发送到客户端后生成的渲染 HTML 页面：

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

编辑

现在使用@Swati 代码后，我有重复的值：

甲，乙，甲，乙

正是这样：在第一次和第二次迭代之间有额外的空间，在写完第一个 B 之后，循环再次开始： comma=>extra space=>A=>comma=>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>

标签： jqueryselectstruts2onchangehidden

解决方案

您可以使用$.each和遍历所有select-box具有相同类名的对象，即：selbox1并将其选定的值存储在数组中，并将其分配给某个输入字段。演示代码：

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;
    //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=profeSustitutoPrimera]").val(list_of_Selected_Values);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
  <input type="text" name="profeSustitutoPrimera" />
  <div style="text-align:center;"> <br><input type="submit" id="ListadoSustituciones_0" value="Confirmar Sustitutos" /></div>
</form>

推荐阅读