根据选项元素值选择变量名称
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据选项元素值选择变量名称相关的知识，希望对你有一定的参考价值。
我正在建立一个测验网站，用户可以从选项元素中选择类别，我将值存储在我的questionCategory变量中，控制台记录它以查看它获取它，它确实如此。我有一些对象数组，其变量名称与我的options元素中的值相同。当我将它作为参数传递给我的函数来启动测验它不会加载数组，而控制台日志输出正确的值，当硬编码时它没有问题。
function startQuiz(numOfQuestions)
questionCount = document.getElementById("selectQuestionCount").selectedIndex;
questionPoll = document.getElementsByClassName("questionCount")[questionCount].value;
categoryType = document.getElementById("selectCategoryType").selectedIndex;
questionCategory = document.getElementsByClassName("categoryType")[categoryType].value;
console.log(questionCategory);
console.log(questionPoll);
$("#questions_div").show();
score=0;
currentQuestion = 0;
totalQuestions = questionPoll;
loadQuestions(currentQuestion,questionCategory);
function loadQuestions(i,j)
mainQuestion.text(j[i].question);
opt1.text(j[i].ans1);
opt2.text(j[i].ans2);
opt3.text(j[i].ans3);
opt4.text(j[i].ans4);
期望根据选项框的值更改questionCategory并调用loadQuestion函数。
答案
如果你正在使用jQuery，你可以考虑做类似的事情：
// external.js
$(function() // load
var array1 = ['a', 'b', 1], array2 = ['c', 'd', 2], array3 = ['e', 'f', 3], array4 = ['g', 'h', 4];
var array5 = ['i', 'j', 5], array6 = ['k', 'l', 6], array7 = ['m', 'n', 7];
var arrayOfArrays = [array1, array2, array3, array4, array5, array6, array7];
var content = $('#content'), sel = $('#sel'), out = $('#outcome');
sel.change(function()
// .text instead of .html so it is escaped
out.text(JSON.stringify(arrayOfArrays[$(this).prop('selectedIndex')]));
);
content.css('display', 'block'); // in case you're generating some gui with javascript
); // load end/* external.css */
*
padding:0; margin:0; box-sizing:border-box; overflow:hidden;
html,body
width:100%; height:100%; background:#aaa; color:#000;
body
position:relative; font:22px Tahoma, Geneva, sans-serif;
body>*
position:absolute;
#content
display:none; width:100%; height:100%;
.page
position:relative; width:100%; height:100%; float:left;
.bar
width:100%; height:38px; padding:3px; background:#ccc; color:#000;
.main
height:calc(100% - 38px); padding:5px; overflow-y:auto;
h1
font-size:28px; margin-left:3px;
#sel
font:22px Tahoma, Geneva, sans-serif; margin-left:4px;
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Select Example</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div id='content'>
<div class='page'>
<div class='bar'><h1>Select Example</h1></div>
<div class='main'>
<label for='sel'>Please select a value:</label><select id='sel'>
<option value='1'>value 1</option>
<option value='2'>value 2</option>
<option value='3'>value 3</option>
<option value='4'>value 4</option>
<option value='5'>value 5</option>
<option value='6'>value 6</option>
<option value='7'>value 7</option>
</select>
<div id='outcome'></div>
</div>
</div>
</div>
</body>
</html>另一答案
function getCategoryName(ctgName)
if(questionCategory == "historyQuestions")
return historyQuestions;
else if(questionCategory == "randomQuestions")
return randomQuestions;
这段代码的目标是从html选项元素中获取一个值，并将其用作对象名来访问该对象内的数组。
questionCategory = document.getElementsByClassName("categoryType")
[categoryType].value;
给我一个字符串，我不能使用question属性。函数getCategoryName将接受一个参数 - questionCategory，它存储字符串并与“字符串”进行比较。
以上是关于根据选项元素值选择变量名称的主要内容，如果未能解决你的问题，请参考以下文章