将字符串设置为变量名

如何解决将字符串设置为变量名

我的html文档中有一个很长的选择框。每个选项都有自己的名称。 我想将所选选项的值字符串转换为javascript变量。 还是我必须使用switch-case-query查询？ 示例：

    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>

解决方法

您可以使用与所选值匹配的键将数据存储在对象中。

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>

,

您可以将选择选项的值更改为0、1、2、3，并且还可以在Java脚本代码中定义一个数组并向其中添加四个变量内容，然后只需将选项值传递给的索引就可以从数组返回每个值。数组。

<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])
}

，或者您可以定义关联数组：

<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])
}

,

您可以在函数中使用getElementById并返回结果，

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>