使用jquery对切换身份时表单项的显示进行控制

今天学习了韩顺平的SSH的校内网的案例，这里记录一下使用js和css对注册身份就行切换时对应的表单项如何控制显示和隐藏。

这是注册界面：

实现目标：当身份选择“已工作”，下面的“类型”和“大学”就会被隐藏。

实现步骤：

1. 注册表单的部分代码：

<table>

......

<tr><td class="tab_td1">身份：</td>
<td><select size="4" οnchange="changeStatus(this);">

<option value="worker">已工作</option>
<option value="graduate">大学</option>
<option value="midstu">中学生/中专技校</option>
<option value="nothing">以上都不是</option></select></td>
<td></td></tr>
<!-- 默认显示是已工作 -->
<!-- 工作的情况start -->
<tr class="worker_spe"><td class="tab_td1">居住地：</td>
<td><select>

<option selected="selected">--请选择省份--</option>
<option>四川省</option>
<option>山东省</option>
<option>重庆市</option></select></td>
<td></td></tr>
<tr class="worker_spe"><td class="tab_td1"></td>
<td><select>

<option selected="selected">--请选择城市--</option>
<option>成都市</option>
<option>广元市</option>
<option>自贡市</option></select></td>
<td></td></tr>
<tr class="worker_spe">

<td class="tab_td1">公司：</td>
<td><input type="text" name="" /></td>
<td></td></tr>
<!-- 工作的情况end -->

<!-- 学生的情况start -->
<tr class="gra_spe">

<td class="tab_td1">类型：</td>
<td><select>

<option selected="selected">--请选择类型--</option>
<option>大学生</option>
<option>硕士</option>
<option>博士</option></select></td>
<td></td></tr>
<tr class="gra_spe">

<td class="tab_td1">大学：</td>
<td><input type="text" name="" /></td>
<td></td></tr>
<!-- 学生的情况end -->

......

</table>

2. 先默认显示身份为工作时的情况，即将学生 class=gra_spe设置为隐藏

.gra_spe{
display:none;
}

3. 使用js实现状态的切换

function changeStatus(obj){
if(obj.value == 'worker'){
$(".gra_spe").hide();   
$(".worker_spe").show();   
}else{
//jquery根据class的值去寻找一个控件。
$(".gra_spe").show();  
$(".worker_spe").hide();
}
}

show()和hide()是jquery的方法，也可以使用css来实现：$(".gra_spe").css("display","block");

4. 实现效果：