[选择Struts2的jQuery选项

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

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

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

为了实现这一点，我使用了一些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>
jquery select struts2 onchange hidden
1个回答
0
投票

您可以使用$.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.