Jquery：如何根据输入读取数组对象答案

【问题标题】：Jquery: How to read array object based on inputJquery：如何根据输入读取数组对象
【发布时间】：2014-06-30 21:22:43
【问题描述】：

我正在设计一个通过表单收集用户输入的应用程序。根据输入，应用程序将在数组对象中搜索相应的值并将该值显示给用户。

我陷入了在数组对象中选择特定值的过程中。下面是我的应用程序的简化版本。数组对象有 2 个属性：性别（男/女）和工作状态（全职/兼职）。

我命名了一个名为“gender”的变量来将用户的输入转换为索引（0 或 1），并在 .val() 中使用该索引来识别对象（男性/女性）。

if($('#inputgender').val()=="Male"){var gender=0;}
if($('#inputgender').val()=="Female"){var gender=1;}

使用相同的方法，我命名了另一个名为“workstatus”的变量，以将用户的输入转换为数组的名称（全职或兼职），但 .val() 无法读取该变量。它将 data[gender].workstatus 读取为未定义。

if($('#inputworkstatus').val()=="Full-time"){var workstatus="fulltime";}
if($('#inputworkstatus').val()=="Part-time"){var workstatus="parttime";}
console.log(data[gender].workstatus);
$("#outputbox").text("Your number is " + data[gender].workstatus);

假设我的数据集比这里使用的示例略大，可能有 4 或 5 个属性（年龄、国家、婚姻状况），有什么更好的方法来构建这个应用程序？

谢谢。

以下是完整代码。

<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>

<body>

<form name="myForm" id="workForm" method="get" action="#">
Your gender:<br>
<SELECT NAME="gender" SIZE="1" id="inputgender">
<OPTION>Male
<OPTION>Female
</SELECT>
<br><br>

Your work status:<br>
<SELECT NAME="workstatus" SIZE="1" id="inputworkstatus">
<OPTION>Full-time
<OPTION>Part-time
</SELECT>
<br><br>
<input type="submit" value="Submit"/>
<INPUT TYPE="reset">
</form>

<span id="outputbox"></span>

</body>

<script type="text/javascript">

var data = [{"gender":"male","fulltime":10,"parttime":20},
{"gender":"female","fulltime":30,"parttime":40}];

$(document).ready(function(){

$("form").submit(function( event ) {
    if($('#inputgender').val()=="Male"){var gender=0;}
    if($('#inputgender').val()=="Female"){var gender=1;}
    if($('#inputworkstatus').val()=="Full-time"){var workstatus="fulltime";}
    if($('#inputworkstatus').val()=="Part-time"){var workstatus="parttime";}
    console.log(data[gender].workstatus);
    $("#outputbox").text("Your number is " + data[gender].workstatus);

event.preventDefault(); 
    });

});

</script>

【问题讨论】：

jQuery 1.4.2?是不是有点老了？
您缺少结束 </option> 标记
@JaredFarrish 对，忘记更新链接了。

标签： jquery arrays forms variables object

【解决方案1】：

要使用变量访问对象属性，您需要使用括号表示法，因此它应该是：

console.log(data[gender][workstatus]);

【讨论】：