Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Kennewick, WA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I reference an object using a string?

    How can I reference an object using a string?

    Specifically, I would like to call a function with a user-supplied parameter such as the value of a select option. The value passed to the function is a string. However, the function is expecting an object, specifically in this case the name of an array.

    For example, suppose "fruit" is the name of an array and the function is called "createOptions()".

    This works as it should:

    createOptions(fruit); [fruit has already been defined as an array]

    This does not:

    createOptions('fruit'); [this is essentially what happens when I call the function from a select list with an onChange action]

    How can I make the function understand that when it receives the string 'fruit', it really refers to the fruit object?

    Or alternatively how can I pass the actual object to the function from a select list?

    This needs to be a general-purpose scalable solution, not something hardcoded like (pseudocode):

    if ( parameter = 'fruit' ) {
    createOptions(fruit);
    } else if ( parameter = 'veggie' ) {
    createOptions(veggie);
    }

    A working demo is below...

    =======================================
    Code:
    <body>
    
    <script type="text/javascript">
    
    var fruit = ['apple','orange','lemon','lime'];
    var veggie = ['carrot','celery','turnip','lettuce','spinach'];
    
    function createOptions(arrayName) {
      document.form1.food.options.length = 0;  // clear existing options
      for ( var i = 0; i < arrayName.length; i++ ) {
        // alert(x[i]);
        document.form1.food.options[i] = new Option(arrayName[i],arrayName[i]);
      }
    }
    
    </script>
    
    <h2>Dynamic select options</h2>
    
    <p>
    Buttons work:<br>
    <input type="button" value="Fruit" onclick="createOptions(fruit)"><br>
    <input type="button" value="Veggie" onclick="createOptions(veggie)">
    </p>
    
    <p>
    Select list doesn't:
    <form name="form1" action="#">
        <select id="pda-brand" onChange="createOptions(this.value)">
            <option value="">Select...</option>
            <option value="fruit">Fruit</option>
            <option value="veggie">Veggie</option>
        </select>
        <select name="food" id="food">
        </select>
    </form>
    </p>
    
    </body>
    =======================================
    Last edited by gregm; 07-19-2007 at 01:07 AM. Reason: added code tags

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <script type="text/javascript">
    
    var fruit = ['apple','orange','lemon','lime'];
    var veggie = ['carrot','celery','turnip','lettuce','spinach'];
    
    function createOptions(arrayName) {
     arrayName=window[arrayName];
     if (arrayName){
      document.form1.food.options.length = 0;  // clear existing options
      for ( var i = 0; i < arrayName.length; i++ ) {
        document.form1.food.options[i] = new Option(arrayName[i],arrayName[i]);
      }
     }
    }
    
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Kennewick, WA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very cool - thank you, Vic! I never would have thought of using "window" for that.

    I also figured out another way to do it, with the magic of "eval":

    Code:
        <select id="pda-brand" onChange="createOptions(eval(this.value))">
            <option value="">Select...</option>
            <option value="fruit">Fruit</option>
            <option value="veggie">Veggie</option>
        </select>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    eval is not a good solution. See the reason here. Using the window object and square bracket notation is the better solution. See my sig for more info of square bracket notation.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Kennewick, WA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tip, Glenn. I have been coding for quite a while, but learned a lot today!

    This works, too:

    Code:
        <select id="pda-brand" onChange="createOptions(window[this.value])">
            <option value="">Select...</option>
            <option value="fruit">Fruit</option>
            <option value="veggie">Veggie</option>
        </select>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •