...

View Full Version : How can I reference an object using a string?



gregm
07-18-2007, 11:56 PM
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...

=======================================


<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>

=======================================

vwphillips
07-19-2007, 12:47 AM
<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>

gregm
07-19-2007, 12:59 AM
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":



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

glenngv
07-19-2007, 01:03 AM
eval is not a good solution. See the reason here (http://www.codingforums.com/showthread.php?t=20143). Using the window object and square bracket notation is the better solution. See my sig for more info of square bracket notation.

gregm
07-19-2007, 01:24 AM
Thanks for the tip, Glenn. I have been coding for quite a while, but learned a lot today!

This works, too:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum