Question

我正在根据我需要的方案创建动态下拉菜单。我想知道如何在单击提交按钮后加载页面时动态保持那些添加的下拉状态。

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

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

Answer 1

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

Answer 2

抱歉迟到在我的工作中遇到了麻烦。这是您的问题的可能解决方案。

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>

SCRIPT：

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

  });
  });

使用jQuery动态创建选择框

2 个答案: