Jquery - Treat a string like a variable name

This is my shortened script:

var string1 = "This is string 1";
var string2 = "This is string 2";

function test() {
    var selectedOption = $("select#myoptions o开发者_开发百科ption:selected").attr("id");
    var str = 'string'+selectedOption;
    $("div#result").html(str);  
}
$("select#myoptions").change(test);

I have a drop down list, every option has an integer id. When selecting this drop down list, I want jQuery gets the id of the selected option and displays the content of the string variable which has the selected id at the end.

If option with id "1" is selected, "This is string 1" will be displayed, ...

But what I get now is the text "string1" displayed instead of the text "This is string 1".

I need some help. Thanks so much!

---

You could update your test function to use eval():

function test() {
    var selectedOption = $("select#myoptions option:selected").attr("id");
    eval('$("div#result").html(string' + selectedOption + ');');
}

Give that a shot.

I provided this as a way of giving you exactly what you asked for, though I really like the answer provided by Rocket which requires a small change on how you store your strings.

---

So, I'm surprised nobody added this answer, which directly answers the OP's question. I agree that other approaches are better, but you can certainly solve his problem in the way he asked by doing this:

var str = 'string'+selectedOption;
var foundString = window[str];

---

Any reason you can't do?

function test() {
    var selectedOption = $("select#myoptions option:selected").attr("id");
    var str = 'This is string ' + selectedOption;
    $("div#result").html(str);  
}
$("select#myoptions").change(test);

Actually, I imagine you have different strings than shown, try:

var stringArray = ['this is string 1', 'this is string 2'];
function test() {
    var selectedOption = $("select#myoptions option:selected").attr("id");
    var str = stringArray[selectedOption -1];
    $("div#result").html(str);  
}
$("select#myoptions").change(test);

You cannot dynamically use variables like you mentioned, your best bet is to get an array and pull the items out by index.

---

You can use an object to store these values, and then get them by their key.

var strings = {
  string1: 'This is string 1',
  string2: 'This is string 2'
};

function test() {
    var selectedOption = $("select#myoptions option:selected").attr("id");
    var str = 'string'+selectedOption;
    $("div#result").html(strings[str]);  
}
$("select#myoptions").change(test);

Or, you could leave the strings the way you had them, and access them via the window object, if they are in the global scope.

var string1 = "This is string 1";
var string2 = "This is string 2";

function test() {
    var selectedOption = $("select#myoptions option:selected").attr("id");
    var str = 'string'+selectedOption;
    $("div#result").html(window[str]);  
}
$("select#myoptions").change(test);

---

No particular reason why it has to be harder than an array, right?

var strs = [
  "This is string 1", // Note, this is strs[0], not strs[1]
  "This is string 2"
];

function test() {
    var selectedOption = $("select#myoptions option:selected").attr("id");
    $("div#result").html(strs[selectedOption]);  
}
$("select#myoptions").change(test);

If you really needed to you could use a hash, like

var strs = {
  dog: "This is string 1",
  cat: "This is string 2"
};

but in any case, 99% of the time when people are trying to look up one variable using one unchanging value (i.e. the name of an array) and one variable (i.e. a key), they want to use something simpler like an array or hash.