Jquery:如何根据输入读取数组对象

时间:2014-06-30 21:22:44

标签: jquery arrays forms variables object

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

我坚持选择数组对象中的特定值。以下是我的应用程序的简化版本。数组对象有2个属性:性别(男/女)和工作状态(全职/兼职)。

我命名了一个名为" gender"的变量。将用户的输入转换为索引(0或1),并使用.val()中的索引来标识对象(男/女)。

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

使用相同的方法,我命名了另一个名为" workstatus"的变量。将用户的输入转换为数组的名称(全职或兼职),但.val()无法读取该变量。它将数据[性别] .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>

1 个答案:

答案 0 :(得分:1)

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

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