Obtain the value of the selected item from a dropdown list that has been dynamically populated

Question

Obtain the value of the selected item from a dropdown list that has been dynamically populated

Hello, I have successfully populated a list of items into an asp:DropDownList using JavaScript. Here is the code snippet:

 if (document.getElementById("<%=gdview.ClientID %>")!=null)
    {
    var rows = document.getElementById("<%=gdview.ClientID %>").getElementsByTagName('tr');
    var cells = rows[1].getElementsByTagName('td');
  //alert(cells)
    i = 2;
    while (i < cells.length)
    {
        document.getElementById("<%=ddl_noofCols.ClientID %>").options[i] = new Option(i + 1, i);
        i++;
           }
    document.getElementById("<%=ddl_noofCols.ClientID %>").options[2].selected =true;
    alert(document.getElementById("<%=ddl_noofCols.ClientID %>").options[2].text);
    }

In this script, the gridview is represented by gdview, and its number of columns are added to the dropdownlist. By default, the third option (index 2) is selected. However, when trying to retrieve the selected item or value using ddl_noofCols.SelectedValue, it returns null.

Could someone advise on how to properly obtain the selected value?

Thank you for your help!

javascript asp.net vb.net

Answer 1

Answer №1

If you are looking for a similar solution, consider the following code snippet:

let table = document.getElementById("<%=gdview.ClientID %>");
let select = document.getElementById("<%=ddl_noofCols.ClientID %>");
let cells;

if (table) {
    cells = table.rows[1].cells;

    for (let i=2, iLen=cells.length; i<iLen; i++) {
        select.options[i] = new Option(i + 1, i);
    }
    select.options[2].selected = true;
    alert(select.options[2].text);

    // To access the current value of the select element,
    // you can use the value property:
    alert(select.value);
}

The value of the currently selected option can be accessed using select.value. In case the selected option does not have a value attribute or property, the value of the text property is returned, except for IE 8 and below where you may need to do something like this:

let value = select.value;

if (!value) {
    value = select.options[select.selectedIndex].text;
}

Answer 2

If you are looking for a similar solution, consider the following code snippet:

let table = document.getElementById("<%=gdview.ClientID %>");
let select = document.getElementById("<%=ddl_noofCols.ClientID %>");
let cells;

if (table) {
    cells = table.rows[1].cells;

    for (let i=2, iLen=cells.length; i<iLen; i++) {
        select.options[i] = new Option(i + 1, i);
    }
    select.options[2].selected = true;
    alert(select.options[2].text);

    // To access the current value of the select element,
    // you can use the value property:
    alert(select.value);
}

The value of the currently selected option can be accessed using select.value. In case the selected option does not have a value attribute or property, the value of the text property is returned, except for IE 8 and below where you may need to do something like this:

let value = select.value;

if (!value) {
    value = select.options[select.selectedIndex].text;
}

Obtain the value of the selected item from a dropdown list that has been dynamically populated

Answer №1

Similar questions

"Utilizing d3 to parse and track variables within JSON data

Struggling to Deploy Application with ASP.NET Core 1.1

Implementing the Tab key functionality without redirecting to the address bar

Change the height of a div after submitting a form using Django (Python)

Performing Vue CLI Global Upgrade

Disable the password box

Issue with Typescript and rxjs 6: Property is not found on type 'object'

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

"Incorporate an image into the data of an AJAX POST request for a web service invocation

Using a for loop in JAVASCRIPT to interact with MONGODB

Exploring Techniques for Adjusting Website to User's Screen Resolution

What could be the reason for my form submission redirecting to the PHP page?

Evaluating the DateTime between the client browser and the remote server using C#

The content of a Puppeteer page mysteriously disappears when transferred to another function

Having difficulties injecting a Service into a TypeScript Controller

The on() method in jQuery is failing to work on an element that has a class added dynamically

Display validation messages when the user either clicks out of the textbox or finishes typing

Pressing a button to input a decimal in a calculator

Retrieving data based on specified criteria in SQL

What causes the browser to be blocked when using $.getJSON()?