问题描述
我的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>