convert string to variable in jquery

Question

I want to set some variables getting they from the values of 5 select elements, the multiselect IDs have the same name that the variable names in the script....

Inside HTML part:

  <select id="variable1">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
  </select>

  <select id="variable2">
    <option value="algo1">algo1</option>
    <option value="algo2">algo2</option>
    <option value="algo3">algo3</option>
  </select>

  <!-- etc -->

and in the jQuery script:

  var variable1;
  var variable2;
  var variable3;
  var variable4;
  var variable5;
  $("#variable1, #variable2, #variable3, #variable4, #variable5").change(function(){
    var valorAcambiar = $(this).attr('id');
    valorAcambiar = $(this).val();
  });

So I'm trying this, but doesn't work... I think the problem is that the script is not running the selected strings values from the ID attr of the select elements as variable names for the script, some one could please help me?

I mean, I want that "valorAcambiar" takes the name of variable1 (coming from id attr of select element) or any other, to change global variable1 (or any other) value in the script.

So I can get variable1 = 20 for example if someone changes variable1 select, or variable2 = algo3 for example if someone changes variable2 select, and this for the 5 multiselect elements.

Thanks.

I misunderstood what you are trying to do; I've added an answer. — Don't Panic, May 25 '21 at 09:37

Linga · Answer 1 · 2021-05-25T05:05:22.143

Try something like this.

function mySelector(selector) {
    return $.extend($(selector),{"selector":selector});
}

$("#" + variable1).change(function(){
    var valorAcambiar = $(this).attr('id');
    valorAcambiar = mySelector($(this));
    // Get and split with # and then evaluate
    valorAcambiar = valorAcambiar.split('#');
    var value = eval(valorAcambiar[1]);
});

A selector is a string. So you can just prepend with # for id and . for class.

prettyInPink · Answer 2 · 2021-05-25T09:20:33.190

You would have to attach the variable to the global window (not best practise), and access it as follow:

window[$(this).attr('id')].

variable1, variable2;

  $("#variable1, #variable2").change(function(){
      let attrId = $(this).attr('id');
      window[attrId] = $(this).val();
      
      if(attrId === 'variable1'){
        console.log(variable1)
      }
      if(attrId === 'variable2'){
        console.log(variable2)
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="variable1">
    <option value="var1 option1">option 1</option>
    <option value="var1 option2">option 2</option>
    <option value="var1 option3">option 3</option>
</select>
<select name="" id="variable2">
    <option value="var2 option1">option 1</option>
    <option value="var2 option1">option 2</option>
    <option value="var2 option1">option 3</option>
</select>

score 0 · Accepted Answer · answered May 25 '21 at 09:37

0

A common term for what you are trying to do is variable variables, or dynamic variables. As this question says:

There is almost always a better solution than using variable variables! Instead you should be looking at data structures and choose the right one for your problem.

You can easily store your data in an object, something like this:

// Master object to store all your variables
var variables = {};

$("#variable1, #variable2, ...").change(function() {
    var id = $(this).attr('id'),
        val = $(this).val();
    
    // Store results in your master object
    variables[id]=val;
    
    // See what it looks like
    console.dir(variables);

    // See what it looks like
    alert('variable1 is ' + variables['variable1'] + ', variable2 is ' + variables['variable2']);
});

Working JSFiddle.

answered May 25 '21 at 09:37

Don't Panic

13,965
5
32
51

Thanks a lot! I had seen some other websites talking about dynamic or variable variables when I was searching for this solution, but I couldn't finish to understand this till I see this example... this is the reason because I always ask anyways even knowing that there are other threads talking about this, I think different answer examples can be a lot helpfull, and you never know wich will be the exactly answer who will make you understand... Thanks a lot! I'm happy because moderators didn't close this thread, and I hope this could help some other people like me in future! – trying2code May 25 '21 at 17:38
@trying2code Glad to help. [Please also upvote if this (or any) answer helped](https://stackoverflow.com/help/someone-answers), thanks! – Don't Panic May 25 '21 at 18:45
I need a 15 reputation! But I will come again when I get it! – trying2code May 27 '21 at 16:04

convert string to variable in jquery

3 Answers3