选择 Struts2 中的 jQuery 选项答案

【问题标题】：jQuery option in a select to Struts2选择 Struts2 中的 jQuery 选项
【发布时间】：2020-03-02 10:18:00
【问题描述】：

我正在一个使用 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 代码后，我得到了重复值：

A,B,A,B

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

【问题讨论】：

你能不能编辑你的html代码并提供一小段你需要在上面实现的代码，这样更容易理解。
嗨@Swati！谢谢你快速的回复。我已经编辑了我的问题，以尽可能减少我之前发布的 HTML 代码。我需要做的是，在用户选择了选择中的所有选项后，将该数据发送到 Struts2 的一个变量中（通常这是逗号分隔的字符串或字符串列表，我可以同时管理这两者）...但我需要在后端拥有这些数据（这是一个扩展 ActionSupport 的 Java 类），从我引入 jQuery 的那一刻起，后端中的变量始终为 null :-( 你能帮帮我吗？谢谢！
所以你需要将所有选择的值放在某个隐藏字段中并传递相同的值，对吗？
嗨！是的，有点。我想在后端拥有值列表。它可能是一个隐藏字段（正如我被告知的那样，对于 UX 来说更干净）或不隐藏，无论对我有什么好处。但是我需要在 Java 后端类中保留 ActionSupport 的扩展，以获取所有其他 struts2 值。谢谢！
stackoverflow.com/a/21097735/573032

标签： jquery select struts2 onchange hidden

【解决方案1】：

您可以使用$.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>

【讨论】：

嗨@Swati！我已经尝试了您的解决方案，它几乎可以工作。我的意思是，我刚刚复制了代码并进行了一些小修复（检查最后一个 if 的文本和输入的名称）......现在它所做的是复制列表：最后我有 A，B ,A,B 如果我在第一个选择中选择 A，在第二个选择中选择 B。我试图用$("input[name=profeSustitutoPrimera]").val(""); 右下方list_of_Selected_Values.length = 0; 清除输入字段，但没有运气。有什么想法吗？
您可以编辑您的问题并将您当前的代码发布到您进行更改的地方吗？更容易找出问题所在。
嗨@Magius，你有同名的2 input，当然，jquery 代码的结果将应用于两个输入字段，这就是重复的原因。（另外，为什么你需要两个具有相同名称的输入，你可以使用一个输入，然后将所有选择的值添加到它）。接下来关于您的输入没有id="profesPrimera" 它是ListadoSustituciones_profesPrimera 这是一个错字。此外，在这里您不能将same id 分配给多个输入。
嗨@Swati！我有 2 个具有相同名称的输入，因为它是来自后端 POJO 的变量（我将它与 struts2 代码一起带来：<s:set name="profesPrimera" value=""/>，这是 html 中显示的输出：<s:hidden name="profesPrimera" value=""/>）它是两次，因为里面的代码HTML 表单位于 Struts2 迭代器中，该迭代器通过对象列表显示这些选择。实际上，如果您注意我展示的第一个代码，您会发现还有 2 个输入重复：diaSeleccionado 和 listaProfesASustituir 出于同样的原因。
我认为这是后端的问题，如果你把你的输入放在迭代器中，它会给你两次，我建议你把这个输入字段放在迭代器循环之外并尝试一次。跨度>