Set string to variable name

Question

There is a very long select-box in my html document. Every option has got an own name. I want to convert the value-string of the selected option into a javascript-variable. Or do I have to do it with a switch-case-query? Example:

    var basketball = "changeable-string";
    var handball = 760;
    var basketball = null;
    var baseball = "description: ball-game to play";
    
    
    function myFunction() {
    //Now I want to work with the name of the variable
    //I would use switch case, but longer select-boxes would take more code...
    //What shall I do?
    }

    <select name="box" onchange="myFunction();">
     <option value="football">Football</option>
     <option value="handball">Handball</option>
     <option value="basketball">Basketball</option>
     <option value="baseball">Baseball</option>
    </select>

score 1 · Accepted Answer · answered Nov 05 '20 at 17:16

You can store the data in an object with the keys matching your select's values.

var data = {
  basketball: "changeable-string",
  handball: 760,
  football: null,
  baseball: "description: ball-game to play"
}

function myFunction(el) {
  console.log(data[el.value])
  }

<select name="box" onchange="myFunction(this);">
  <option value="football">Football</option>
  <option value="handball">Handball</option>
  <option value="basketball">Basketball</option>
  <option value="baseball">Baseball</option>
</select>

HoldOffHunger · Answer 2 · 2020-11-05T17:25:21.830

You can select the value by looking at the event.target. To quote the official documentation...

The target property of the Event interface is a reference to the object onto which the event was dispatched. (Source: MDN Web Docs: Event.target)

Since event.target is the element that triggered the event, so looking at its attributes should work (whether you want value or name attribute). You can even make up your own data-attributes...

    var basketball = "changeable-string";
    var handball = 760;
    var basketball = null;
    var baseball = "description: ball-game to play";
    
    
    function myFunction(e) {
    //Now I want to work with the name of the variable
    //I would use switch case, but longer select-boxes would take more code...
    //What shall I do?
           console.log("Name: " + e.target.name + "| Value: " + e.target.value + ". Description: " + e.target.selectedOptions[0].dataset.description);
    // Here we are using e.target.value to get the value of the element that triggered this event.
    }

    <select name="box" onchange="myFunction(event);">
     <option value="football" data-description="Football is rough!">Football</option>
     <option value="handball" data-description="Handball is sly!">Handball</option>
     <option value="basketball" data-description="Basketball is agile!">Basketball</option>
     <option value="baseball" data-description="Baseball is boring!">Baseball</option>
    </select>

In the above example, you can see:

Displaying a select's selected option value.
Displaying a select's name.
Displaying a select's selected option custom, data-attribute.

Mustafa Poya · Answer 3 · 2020-11-05T17:26:55.663

You can change the value of your select options to 0, 1 2, 3 and also in java script code define an array and add the four variable content to it then return each value from array just by passing option value to index of array.

<select name="box" onchange="myFunction(this);">
  <option value="0">Football</option>
  <option value="1">Handball</option>
  <option value="2">Basketball</option>
  <option value="3">Baseball</option>
</select>

var data = ["changeable-string", 760, null, "description: ball-game to play"];

function myFunction(e) {
    console.log(data[e.value])
}

or you can define an associative array:

<select name="box" onchange="myFunction(this);">
  <option value="football">Football</option>
  <option value="handball">Handball</option>
  <option value="basketball">Basketball</option>
  <option value="baseball">Baseball</option>
</select>

var data = new Object();
data["basketball"] = "changeable-string";
data["handball"] = 760;
data["football"] = null;
data["baseball"] = "description: ball-game to play";

function myFunction(e) {
    console.log(data[e.value])
}

Zeta · Answer 4 · 2020-11-05T18:21:05.687

You can use getElementById in function and return the result,

function myFunction(id) {
 const v = document.getElementById(id).value;
 var result;
  switch(v){
  case "football" :
  result = 1; console.log(result);
  return result; break;
  case "handball" : 
  result = 2; console.log(result);
  return result; break;
  case "basketball" : 
  result = 3; console.log(result);
  return result; break;
  case "baseball" :
  result = 4; console.log(result);
  return result; break;
  default :
  result = "Choose your options!"; console.log(result);
  return result; break;
  }
  console.log(result);
  return result;
}

<select id="box" onchange="myFunction(id);">
  <option value="default">Choose..</option>
  <option value="football">Football</option>
  <option value="handball">Handball</option>
  <option value="basketball">Basketball</option>
  <option value="baseball">Baseball</option>
</select>

Set string to variable name

4 Answers4