Empty dropdown list displaying no options

Question

Empty dropdown list displaying no options

<script>
    function populateDropdown()
    {
        var dropdown = document.getElementById("ddFAge");
        
        for(var i=1;i<=100;i++)
        {
            var newOption = new Option()
            newOption=document.createElement(option);
            newOption.Text = i;
            newOption.value = i;
            dropdown.options[i] = newOption;
            
            //dropdown.options.add(newOption);
   
            //<option value="0"><--Select Age--></option>
        }
    }
    window.onload=populateDropdown();
</script>

I designed this script to assign numbers 1-100 to an asp.net dropdown list. However, the dropdown list is not displaying any data. I have included a screenshot of the inactive dropdown. What mistake did I make in the code above?

javascript asp.net

Answer 1

Answer №1

There are several issues in your code. Consider the following corrections:

function createDropdown() {
    var dropdown = document.getElementById("dropdownAge");

    for (var i = 1; i <= 100; i++) {
        var newOption = document.createElement('option');
        newOption.text = i;
        newOption.value = i;
        dropdown.appendChild(newOption);
    }
}
window.onload = createDropdown();

Answer 2

There are several issues in your code. Consider the following corrections:

function createDropdown() {
    var dropdown = document.getElementById("dropdownAge");

    for (var i = 1; i <= 100; i++) {
        var newOption = document.createElement('option');
        newOption.text = i;
        newOption.value = i;
        dropdown.appendChild(newOption);
    }
}
window.onload = createDropdown();

Empty dropdown list displaying no options

Answer №1

Similar questions

establish the parent child size with CSS

Utilize Mongo's $facet feature to retrieve and calculate the number of tags associated with the products that have been

Passing specific props to child components based on their type in a React application using TypeScript

Alert for JavaScript Increment (++) Operation

Steps for comparing two inputs and displaying a div:1. Obtain the values of

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

Is the syntax incorrect or is there another reason for the empty array being passed, as the "resolve" callback is running before the completion of the for loop?

Place a <script> tag within the Vue template

deleting the selected list item with JavaScript

What is preventing me from updating one dropdown list based on the selection made in another dropdown list?

Adjust the size of an element using the jQuery library's knob.js

Simultaneously sending requests with REST API and Ajax

Express is having trouble providing data to React

Should I use CodeBehind or CodeFile in ASP.Net 3.5/4.0?

Developing ASP.NET web services in C# requires strong understanding of IRepository and effective communication

Is there a way to maintain the original indexing of a list after users have selected a filtered item in React using Webpack?

Error occurs when attempting to filter data through input text pasting in Angular

Can dates in the form of a String array be transmitted from the server to the client?

Difficulty with ASP.net C# calculating component

Crafting a dynamic bar chart with recharts for your data visualization