使用 jQuery 动态创建选择框 - Create select box dynamically with jQuery

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

我能够在 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++;
      });
  });

如果有任何帮助，可以找到在表单提交后获取以前选择的值的方法，我们将不胜感激。（这是必需的，因为当提交表单时有错误时，这些选定的值应该是相同的，但现在它会刷新并成为默认值。同样在视图场景中，这也应该预加载）

您必须在

查询字符串或 post 标头中将所选值从服务器端发送回页面。然后在 jQuery 中根据发回的值相应地选择该选项。

抱歉迟到了，我的工作有麻烦。这是针对您的问题的可能解决方案。

多姆：

<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);
      });
  });
  });