asked on

JavaScript not recognising select list options

Hi all,

We have an ASP.NET MVC application that has a partial page containing a select list, when the value of that select list is changed, we use JavaScript to populate a second select list.

After this happens we attempt to get the first value from the second select list, but there are no options for it. If we do a console.log output, we can see the second select list has it's new options, but the options.length property shows as zero. It is as if JavaScript sees it as a string of HTML and not an array of values.

Has anyone encountered this before and if so, how did you resolve the issue?

Thank you.

resourcesys.

Chinmay Patel

Hi resourcesys,

How are you populating the second Select? Please share the code that you are using.

Regards,
Chinmay.

Julian Hansen

we use JavaScript to populate a second select list

This implies that JavaScript has access to the data.

Can you show us the JavaScript code that does this.

resourcesys

ASKER

The code that populates the select list is a s follows:

        $.get("/Reports/DTData/GetItems", params, async function (data) {
            var graphTypes = data.GraphTypes;
            var ddl = document.getElementById("ddlGraphType");

            ddl.options.length = 0;

            $.each(graphTypes, function (index, graphType) {
                 ddl.options[ddl.options.length] = new Option(graphType.Text, graphType.Value);
            });

Open in new window

Julian Hansen

Firstly, the async in front of your callback is unnecessary - you are not using await in the callback so putting async in there does not do anything (also not supported on IE11 and below)

You have access to the Select options in the graphTypes return.

Are you saving that somewhere to use later?

Where is the code where you are trying to access the JavaScript data again?

Because you are not saving graphTypes you lose it when you leave the callback;

resourcesys

ASKER

Hi Julian,

The async was in the code as I needed this function to complete before another function was called. Not familiar with it but thought I would give it a try.

Yes, we don't keep the graphType object, as we should be able to get the values from the select list, but cannot.

Again, When I do a console.log on the select list in the method trying to get its value, I see the following:

<select id="ddlGraphType" name="ddlGraphType">
	<option value="Hours">Hours</option>
	<option value="Minutes">Minutes</option>
	<option value="Percentage">Percentage</option>
</select>

Open in new window

But when I do ddlGraphType.options.length the result is zero.

The function that tries to get the ddlGraphType is:

    function loadChart() {
        var ddlx = document.getElementById("ddlGraphType");

        console.log('Load Chart');
        console.log(ddlx);
        console.log(ddlx.options.length);

        var params = {
            GraphType: $("#ddlGraphType").val(),
            Category: "ALL"
        };

        console.log(params);

        $("#Chart").load("/Reports/DTData/GetChartData", params);
    }

Open in new window

This is where the problem seems to be.

Thanks.

resourcesys.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

resourcesys

ASKER

loadChart() runs after ddlGraphType options are set.

I'll call it after the each to see if that has any impact.

resourcesys

ASKER

Hi Julian,

Calling after the $each has taken care of the issue.

Will have to do some minor refactoring of code , but this will get it working.

Thank you very much for your help.

resourcesys.

Julian Hansen

You are welcome.