将字符串设置为变量名

Question

我的 html 文档中有一个很长的 select-box。每个选项都有自己的名称。我想将 selected 选项的值字符串转换为 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>

Answer 1

您可以通过查看 event.target 来 select 值。引用官方文档...

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)

由于 event.target 是触发事件的元素，因此查看其属性应该可行（无论您想要值还是名称属性）。你甚至可以自己编 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>

在上面的例子中，你可以看到：

显示 select 的 selected 选项值。
正在显示 select 的姓名。
正在显示 select 的 selected 选项自定义，data-attribute。

Answer 2

您可以将 select 选项的值更改为 0、1、2、3，并且在 java 脚本代码中定义一个数组并将四个变量内容添加到其中 return 数组中的每个值只需将选项值传递给数组的索引即可。

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

Answer 3

您可以使用与 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>

Answer 4

您可以在函数中使用 getElementById 和 return 结果，

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

html

javascript

string

variable-names