I recently spent a lot of time debugging this code i was working on for what I thought would be a simple onchange event.
The Issue:
I have sizes and colors, but not all sizes are available in all colors, so onchange of the color select box, i need to load the correct size options select box.
Between a lot of back-end manipulation, I was able to create my front-end JS arrays of colors with the sizes that are available. I ran into the issue that my passed in variable to the function was becoming the array, instead of calling the array.
For example, If I passed in «BLK» for Black, I was getting:
- array[0] =>B
- array[1] =>L
- array[2] =>K
- array[N] => undefined
where the Nth options looped through undefined until my for loop for the options of my color box's length had been reached.
The Solution:
After scratching my head for hours and trying 232132 things, It turns out all I needed to do was to use the eval() function to evaluate my variable first, instead of treating it like a literal string.
Here's the completed working source:
-
- function popsizes(colorcode) {
-
- var BLK= ["2XL","3XL","4XL","5XL","LG","MD","SM","XL","XS"];
- var WH= ["LG","MD"];
- // etc, many more color arrays
-
- elem = document.getElementById("selcolor");
- sizelist = eval(colorcode);
-
- for (i=0; i<elem .options.length; i++) {
- document.getElementById("selsize").options[i] = new Option(sizelist[i]);
- }
- }
-
That script is powered by the onchange event from the form:
- <tr>
- <td>
- <select "id="selcolor" name="color" onchange="popsizes(this.options[this.selectedIndex].value);">
- <option value="WH">White</option>
- <option value="BLK">Black</option>
- <option value=""> Many more colors, etc .... </option>
- </select>
- </td>
- <td>
- <select "id="selsize" name="size">
- <option value="">Select Color First</option>
- </select>
- </td>
- </tr>