javascript - 动态生成一个选择类型，其中包含单击添加按钮时指定的选项

Question

我见过一个 j 查询函数，它可以在单击按钮时动态生成输入类型 = 文本，但如何使用选项动态生成选择并每次获取值。

j查询函数:

               <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function () {

        $("#btnAdd").bind("click", function () {
            var div = $("#TextBoxContainer");
            div.append('<div>' + GetDynamicTextBox("") + '</div>');

        });

        $('form').on('submit', function (e) {
            var values = "";
            $("input[name=DynamicTextBox]").each(function () {
                values += $(this).val() + "\n";
            });

            $("#<%= hdnfldVariable.ClientID %>").val(values);

        });
        $("body").on("click", ".remove", function () {
            $(this).closest("div").remove();
        });
    });
    function GetDynamicTextBox(value) {

        return '<select name="Sexe" id="Sexe" class="field-select"></select>';

        return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
            '<input type="button" value="Remove" class="remove" />';

    }

html:

       <input id="btnAdd" type="button" value="Add" />
       <br />
      <br />
     <div id="TextBoxContainer">
     <!--Textboxes will be added here -->
     </div>
     <br />

    <button id="btnGet" runat="server"   onserverclick="Submit_Click">Submit</button>
     <asp:HiddenField ID="hdnfldVariable" runat="server" />

Answer 1

尝试下面的代码片段。要获取提交时选择的值，您可以使用:

$('#mySelect').val();

$("#getSelect").click(function(e) {
  e.preventDefault();


  var select = '<select name = "test" id="mySelect">Select</select>';
  if ($('#selectholder').empty()) {
    $('#selectholder').append(select);
  }
  for (i = 0; i < 10; i++) {
    $('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="getSelect">Display select</div>
<div id="selectholder"></div>