generate dynamically a select type with options specified on add button click

Question

i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.

the j query function:

               <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" />';

    }

the 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/…

Chetan
– Chetan

2018-04-25 22:44:21 +00:00
Commented Apr 25, 2018 at 22:44 — Chetan
– Chetan, Commented Apr 25, 2018 at 22:44

Bee · Accepted Answer · 2018-04-25 23:52:45Z

1

Try the below snippet. To grab the values of select on submit you can use:

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

answered Apr 25, 2018 at 23:52

Bee

1247 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

generate dynamically a select type with options specified on add button click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related