Geek Answers Handbook

JQuery - treat string as variable name

This is an abbreviated script:

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(str); } $("select#myoptions").change(test);

I have a drop down list, each parameter has an integer id. When choosing this drop-down list, I want jQuery to get the identifier of the selected parameter and display the contents of the string variable that has the identifier selected at the end.

If the option with identifier "1" is selected, "This is line 1" is displayed, ...

But now I get the text "string1", which is displayed instead of the text "This is line 1".

I need help. Thank you very much!

+4
source share
5 answers

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

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

Take a picture.

I presented this as a way to give you exactly what you requested, although I really like the answer provided by Rocket, which requires a slight change in how you store your lines.

+6
source

For what reason can you not 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 think you have different lines 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, as you mentioned, it is best to get an array and display elements by index.

+3
source

You can use the 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 can leave the lines as you had them and access them through 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);
+3
source

So, I am surprised that no one has added this answer, which directly answers the OP question. I agree that other approaches are better, but you can certainly solve your problem the way he asked it:

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

There are no special reasons why this should be more complicated 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 need to, you can 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 try to find one variable using one constant value (i.e. the name of the array) and one variable (i.e. the key), they want to use something simpler, like an array or a hash.

+2
source

More articles:


All Articles