动态生成带有在添加按钮单击时指定的选项的选择类型答案

【问题标题】：generate dynamically a select type with options specified on add button click动态生成带有在添加按钮单击时指定的选项的选择类型
【发布时间】：2018-04-25 22:40:40
【问题描述】：

我见过一个 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" />

【问题讨论】：

stackoverflow.com/questions/4814512/…

标签： javascript c# jquery html asp.net

【解决方案1】：

试试下面的 sn-p。要在提交时获取 select 的值，您可以使用：

$('#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>

【讨论】：