2

我正在根据我需要的场景创建一个动态下拉列表。我想知道如何在单击提交按钮后加载页面时动态保持这些添加的下拉列表的状态。

我能够在 jquery 中存储一个变量并检查表单是否已提交，以及是否已提交以加载先前动态添加的下拉列表（html 选择框），但即使我将它们加载回来，我仍然无法获取先前选择的内容这些动态下拉列表的值。

我创建了一个提琴手。http://jsfiddle.net/jBJSw/8/

我的表格

<form>
    <div id="TextBoxesGroup">
        <div id="TextBoxDiv1">
            <label>Textbox #1 :</label>
            <input type="text" id="textbox1">
        </div>
    </div>
    <input type="button" value="Add Button" id="addButton">
    <input type="submit" value="submit Button" id="subButton">
</form>

脚本

  $(document).ready(function () {

      var counter = 2;

      $("#addButton").click(function () {

          if (counter > 10) {
              alert("Only 10 allow");
              return false;
          }

          var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
          newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
              '<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');

          newTextBoxDiv.appendTo("#TextBoxesGroup");
          counter++;
      });
  });

感谢您在提交表单后找到获取先前选择的值的方法是否有任何帮助。（这是必需的，因为当表单提交错误时，这些选定的值应该相同，但现在它会刷新并恢复为默认值。在视图场景中也应该预加载）

4

2 回答 2

2

您必须在查询字符串或帖子标题中从服务器端将选定的值发送回页面。然后根据发回的值在 jquery 中相应地选择选项。

于 2013-10-02T06:27:15.623 回答
1

很抱歉迟到了，给我的工作带来了麻烦。这是您的问题的可能解决方案。

DOM：

<form id="myform" method="post"> <!--adding id attribute-->
    <div id="TextBoxesGroup">
        <div id="TextBoxDiv1">
            <label>Textbox #1 :</label>
            <input type="text" id="textbox1">
        </div>

        <!--check if POST is established-->
        <?php if($_POST): ?>
            <?php if(count($_POST['mySelect']) < 0 ): ?>

            <?php

               //Recreate your select DOM
               $arr = $_POST['mySelect'];
               foreach($arr as $ind => $val){

                  echo '<select>';
                  echo '<option val="val" ' . ($val == "val" ? "selected" : "") . '>desc2</option>';
                  echo '<option val="val2" ' . ($val == "val2" ? "selected" : "") . '>desc</option>';
                  echo '<option val="val3" ' . ($val == "val3" ? "selected" : "") . '>desc3</option>';
                  echo '</select>';
               }

            ?>                


            <?php endif; ?>
        <?php endif; ?>
    </div>
    <input type="button" value="Add Button" id="addButton">
    <input type="submit" value="submit Button" id="subButton">
</form>

脚本：

 $(document).ready(function () {

      var counter = 2;

      $("#addButton").click(function () {

          if (counter > 10) {
              alert("Only 10 allow");
              return false;
          }

          var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
          newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
              '<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');

          newTextBoxDiv.appendTo("#TextBoxesGroup");
          counter++;
      });

     //adding hidden inputs
     $('#myFORM').on('submit', function(){

      $('#myFORM select').each(function(){
         slct = $('<input type="hidden" name="mySelect[]" value="' +  $(this).val() +'">');
         $('#myFORM').append(slct);
      });

  });
  });
于 2013-10-02T08:23:38.773 回答