How can i get eval to function properly in IE?

Question

I have the following:

<select id="price_select"></select>

I have an event handler that invokes the following:

var selected_option = "one";
var option_one = "<option>Option Contents</option>";
document.getElementById('price_select').innerHTML = eval('option_' + selected_option);

Works just fine in Firefox but not in IE6.

Answer 1

Can't you do something like this instead?

var selected_option = "one";
var options = { "one": "<option>Option Contents</option>" };
document.getElementById('price_select').innerHTML = options[selected_option];

Answer 2

innerHTML does not work in IE6 dropdowns because it is a bug.

eval() does work in IE 6

Answer 3

try this:

eval("var x= " + ('option_' + selected_option));
document.getElementById('price_select').innerHTML = x;

Answer 4

Working off of what marknt15 and MartinodF said, you should be able to use native DOM manipulation to do what you're trying to do without using eval().

var selected_option = "one";
var options = { "one": {"value": "0", "text":"OptionContents"}  };
var e = document.createElement("option");

if(e.innerText) {// IE sets innerText like this
    e.innerText = options[selected_option].text;
} else { // W3C sets inner text like this
    e.childNodes[0].nodeValue = options[selected_option].text;
}

e.value = options[selected_option].value;

document.getElementById('price_select').appendChild(e);

You might want to consider using a full-featured JavaScript framework such as jQuery or Prototype to make things like this easier to handle though.