How to add options to the drop down dynamically in ASP .NET

Question

0.00/5 (No votes)

See more:

Below is my dropdown i need to add options to the first dropdown from 1 to 30 and I need to add options to the drop down 1 to 100 dynamically how can I do this?

<script type="text/javascript">
       function GetDynamicTextBox(value) {
           if (value == "") {
               return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />  <Select id="ddlID" name = "DynamicTextDropdown"></Select>  <Select name = "DynamicTextDropdown"></Select>' +
                ' <input id="btnAdd123" type="button" value="Add" onclick="AddTextBox()" /><input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
           }

       }
       debugger;
       function GetDynamicTextBox1(value, i) {
           debugger;
           return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />  <input name = "DynamicTextDropdown" id="ddlID" type="value" value = "' + i + '" />' +
                      ' <input id="btnAdd123" type="button" value="Add" onclick="AddTextBox()" /><input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
       }
       function AddTextBox() {
           var div = document.createElement('DIV');
           div.innerHTML = GetDynamicTextBox("");
           document.getElementById("TextBoxContainer").appendChild(div);
       }
       function AddTextBox1() {
           var inputCount = document.getElementById('TextBoxContainer').getElementsByTagName('input').length;
           if (inputCount == "0") {
               var div = document.createElement('DIV');
               div.innerHTML = GetDynamicTextBox("");
               document.getElementById("TextBoxContainer").appendChild(div);
           }

       }
       function RemoveTextBox(div) {
           document.getElementById("TextBoxContainer").removeChild(div.parentNode);
       }

       function RecreateDynamicTextboxes() {
           var values = eval('<%=Values%>');
           if (values != null) {
               var html = "";
               for (var i = 0; i < values.length; i += 2) {
                   html += "<div>" + GetDynamicTextBox1(values[i], values[i + 1]) + "</div>";
               }
               document.getElementById("TextBoxContainer").innerHTML = html;
           }
       }
       window.onload = RecreateDynamicTextboxes;
   </script>
    <script type="text/javascript">


        $(document).ready(function () {
            debugger;
            var selectHTML = "";
            for (i = 1; i < 101; i++) {
                selectHTML += "<option value='" + i + "'>" + i + "</option>";
            }


            $("#ddlID").empty();
            $("#ddlID").append(selectHTML);
        });
   </script>

What I have tried:

i could not find the source for doing this

Posted 1-May-17 19:18pm

Member 12324523

Updated 1-May-17 20:11pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Nirav Prabtani** · Answer 1 · 2017-05-01T19:41:00

Solution 1

I think you have not searched in google for same, There is a thousands of solutions which will fulfill your need.

Anyway do this

HTML

<select id="ddlID"></select>

JAVASCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">


       $(document).ready(function () {

       var selectHTML = "";
       for (i = 1; i < 101; i++) {
           selectHTML += "<option value='" + i + "'>" + i + "</option>";
       }


       $("#ddlID").empty();
       $("#ddlID").append(selectHTML);
   });
   </script>

Posted 1-May-17 19:41pm

Nirav Prabtani

Updated 1-May-17 19:54pm

v4

Comments

Member 12324523 2-May-17 1:43am

it can be added in code behind in thousands of ways but i am not getting the id of my drop down in code behind

Nirav Prabtani 2-May-17 1:46am

See my updated solution

Member 12324523 2-May-17 1:49am

i had done the same but i am not getting 1 to 100 into my dropdown can you help me out as i am new to this

Nirav Prabtani 2-May-17 1:54am

this will work for sure, please check updated answer

Member 12324523 2-May-17 1:59am

i had done in this way by placing yor code but its not working

function GetDynamicTextBox(value) {
if (value == "") {
return ' ' +
' '
}

}
debugger;
function GetDynamicTextBox1(value, i) {
debugger;
return ' ' +
' '
}

$(document).ready(function () {

var selectHTML = "";
for (i = 1; i < 101; i++) {
selectHTML += "<option value='" + i + "'>" + i + "</option>";
}

$("#ddlID").empty();
$("#ddlID").append(selectHTML);
});

Nirav Prabtani 2-May-17 2:08am

My code will work on page load, What is your exact requirement?
I have checked my snippet, It is working.

Make sure you have placed that jquery link also

Member 12324523 2-May-17 2:11am

i have a button on clicking that button i will display textbox with drop downs in a pop up i need to bind 1 to 100 to first dropdown on loading the modal pop and 1 to 50 to second dropdown i had posted my code by editing the post because if i am posting in reply my script is not getting displayed in the post

Member 12324523 2-May-17 2:13am

i had update my original post could you please look my original post

Nirav Prabtani 2-May-17 2:16am

What is "TextBoxContainer" ?? please share HTML Code as well