javascript - 使用 jQuery 动态创建选择框

Question

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

我能够在 jquery 中存储一个变量并检查表单是否已提交以及是否提交以加载回先前动态添加的下拉列表(html 选择框)但是即使我加载它们仍然我有一个问题这些动态下拉列表的先前选择的值。

我创建了一个 fiddler 。 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++;
      });
  });

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

Answer 1

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