<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<style>
*{
margin:0;
padding:0;
font-size:12px;
}
.wrap{
width:800px;
margin:0 auto;
text-align: center;
}
/*选项*/
.student{
margin-top:50px;
}
.yes,.no{
margin:0 50px;
vertical-align: middle;
}
.in,.out{
margin-top:20px;
}
.in select{
margin:0 20px;
width:130px;
height:30px;
box-sizing: border-box;
}
.out input{
width:250px;
height:30px;
box-sizing: border-box;
}
label{
font-weight: bold;
}
.out{
display: none;
}
</style>
</head>
<body>
<div>
<!--选项-->
<div>
<label for="yes">
<input type="radio" name="sec" id="yes" checked="checked">
在校生
</label>
<label for="no">
<input type="radio" name="sec" id="no">
非在校生
</label>
</div>
<!--在线生选项-->
<div id="in">
<label for="city">
学校
<select name="city" id="city">
<option value="">请选择</option>
</select>
<select name="school" id="school">
<option value="">请选择</option>
</select>
</label>
</div>
<!--非在校生-->
<div id="out">
<label for="job">
就业单位
<input type="text" name="job" id="job">
</label>
</div>
</div>
</body>
<script>
var $ =function(id){
return document.getElementById(id);
};
function select(){
if($("yes").checked === true){
$("in").style.display = "block";
$("out").style.display = "none";
}else if($("no").checked === true){
$("in").style.display = "none";
$("out").style.display = "block";
}
}
select();
</script>
</html>
添加回答
举报
0/150
提交
取消