posted 7 years ago
Hi!
I'm trying to make a page update a dropdown using an ajax request. The idea is there's a few dropdowns in a row on this page where you don't know what the options for the next one will be until the previous one is selected.
I could solve this pretty easily by just submitting the page every time a dropdown is selected, but that would be cumbersome and inconvenient and more complicated than it should need to be. We would prefer to just make an ajax call when a dropdown is selected to get the items to put in the next list, then populate it in the onreadystatechange function.
I'm running into a strange bug though. Right now I have this as my onreadystatechange function: (Names changed for secret spy reasons)
There's multiple lists like the one above, and each one calls a function onchange that populates the options in the next one.
Soooo the issue is when you try to select the first one in the page I'm working on now, it has an issue with this:
> selField.options[selField.options.length] = oItem;
Because it says selField.options is undefined. I actually ran into this exact same problem on an unrelated page a week ago or so and I realized that whenever the options list only had one item in it, it treated it as if it were NOT a list; so when you tried to get "options" from the field, it didn't find an options list and thought it was undefined. But I know it's still able to add options to the list because note: It doesn't have *zero* options, it has 1 option. The line that adds that option is in a different function, but it looks like this:
> selField[0] = new Option('---', '0');
It works because it doesn't try to call .options on selField; it just tells it "Hey, I want to set the first index"; so it doesn't throw a "selField.options is undefined" error, and so on and barf and so on... I know it's that the options object itself is undefined because I called on it in the console and it told me it was undefined there too, so the issue is technically with the .length part, since I'm making a call on an undefined object, but the root of the issue is that it thinks selField.options === undefined.
But this is the weird part to me: I did not have to deal with this on the other page, which is currently working. But I *did* have to deal with this on an unrelated dropdown-populating javascript function. It appears that these seemingly identical lists on different pages are having different behavior at different times for no apparent reason but that seems unlikely, which leads me to believe that there's a reason this is happening that I'm just not aware of; something to do with how arrays work in javascript, or how dropdown selectors work. What would cause javascript to treat a list with 1 option as a list in some cases and act like it's undefined in other cases?
For now I'm going to see if I can get it to work by using "i" as the array index in the options-population loop; it does appear to be able to add options to the list even if it says it's undefined when you call .length on it, which doesn't make sense if the object really is undefined, but I'm going to try it anyway and come back here in a bit with the results.