Need to use 'value' of an HTML select 'option' as an array name

Question

I have a couple JavaScript arrays:

 var someMotionToys = ["cars", "bikes", "surfboards", "skis"];
 var immobileToys = ["xbox", "guitar", "paintbrush", "laptop", "crossword puzzles"];
 var rareToys = ["ironmaiden", "pogostick", "lawndarts"];

I have an HTML 'select' tag as follows:

     <select id="toys" onchange="handleToysChoice(this)">
          <option value="someMotionToys">toys in motion</option>    
          <option value="immobileToys">toys for inside</option>    
          <option value="rareToys">antique toys</option>    
     </select>

I handle the onchange JavaScript function here:

     function handleToysChoice(theToysSelector)
     {
        var theToySelection = theToysSelector.value;

         // AT THIS POINT -- assume the user selected 'toys in motion' 
         // so 'theToySelection' here is "someMotionToys" -- that is *also*
         // the name of my array -- but the following tells me it's not 
         // referencing the array:
         alert("The number of elements in the array " + theToySelection 
                  + " is: " + theToySelection.length);
     }

The 'length' value I get is the length of the word 'someMotionToys' which, despite being the name of my array, is also the name of the 'value' from the html 'select' box. In other words, the 'length' value I see is 14 (the number of letters in 'someMotionToys') but I need the 'length' to be 4, the number of elements in my 'someMotionToys' array. I need this 'value' from the HTML select box to be 'connected' to my array. I want to store my array names in select boxes, in their 'value' fields, then easily extract the 'value' in the onchange handler and quickly reference the right array.

How do I 'coerce' the text string I get from a value out of an HTML 'select' so that it is mapped to my array name?

I need to store array names in several 'selects' on my web page -- my plan was to store the array names in the 'value' of each option in the 'select' boxes.

How can I make this work? I have no plans to use jQuery by the way.

try var theToySelection = eval(theToySelector.value), I think this will return your array — slash197
– slash197, Commented Jul 21, 2013 at 7:15
@slash197 -- THANKS! That solved my problem -- that works. I can now store my array names in my select boxes -- nice. Thank you. — CFHcoder
– CFHcoder, Commented Jul 21, 2013 at 7:20

T.J. Crowder · Accepted Answer · 2013-07-21 07:17:07Z

5

The best way to do this is to make those arrays properties of an object:

var arrays = {
    someMotionToys: ["cars", "bikes", "surfboards", "skis"],
    immobileToys:   ["xbox", "guitar", "paintbrush", "laptop", "crossword puzzles"],
    rareToys:       ["ironmaiden", "pogostick", "lawndarts"]
};

Then use

var theArray = arrays[theToySelection];

...to get the array. In JavaScript, you can access an object property either using dot notation and a literal (foo.bar) or using brackets notation and a string (foo["bar"]). In the latter case, the string can be the result of any expression (foo["b" + "a" + "r"] works, for instance), including a variable reference.

If those arrays are declared at global scope, they're already properties of an object — the global object, which you can reference using window:

var theArray = window[theToySelection];

But if they're globals, I would recommend refactoring so they're not globals. :-)

answered Jul 21, 2013 at 7:17

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T.J. Crowder Over a year ago

@CFHcoder: You're welcome. I just added a bit of explanation of the syntax.

Collectives™ on Stack Overflow

Need to use 'value' of an HTML select 'option' as an array name

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related