动态生成一个选择类型,并在添加按钮单击时指定选项

时间:2018-04-25 22:40:40

标签: javascript c# jquery html asp.net

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

1 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#13;
$("#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>');
  }
});
&#13;
<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>
&#13;
&#13;
&#13;