二级联动

来源：互联网发布：非线性优化计算方法编辑：程序博客网时间：2024/04/26 18:20

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="#" id="f">
用户名:<input type="text" id="username" />
<span id="nametip">

</span>
<br>
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<br>
地址:
<select id="sheng">
<option>--省--</option>
</select>
<select id="shi">
<option>--市--</option>
</select>
<br>
<input type="submit" value="注册"/>
</form>
<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
<tr>
<td>用户名</td>
<td>性别</td>
<td>地址</td>
<td>操作</td>
</tr>
</table>

<script type="text/javascript">
//页面加载的时候，就要将省的信息，和市的信息添加到页面
var arr = new Array();
arr["山东"]=new Array("青岛","济南","聊城");
arr["山西"]=new Array("运城","太原","临汾");
//先将省放入第一个下拉菜单
for(sheng in arr){
$("#sheng").append("<option>"+sheng+"</option>");
}
//-----------------------------------市----
//当省的下拉改变的时候，市做相应的显示
$("#sheng").change(function(){
//每次清空一下，防止重复
$("#shi").empty();
$("#shi").append("<option>--市--</option>");
//根据省取出市，放入第二个下拉菜单
var s1 = $("#sheng").val();
var shis = arr[s1];//shis是个数组
for(shi in shis){
var s2 = shis[shi];
$("#shi").append("<option>"+s2+"</option>");
}
});
//表单验证
$("#f").submit(function(){
//获取名字，验证是否为空
var username = $("#username").val();
if (username=="") {
//提示
$("#nametip").html("用户名不能为空");
//变色
$("#nametip").css({"color":"red"});
return;//结束方法
}else{
$("#nametip").html("");
}
// 获取性别
var sex = $("input[type=radio]:checked").val();
// var sex = $("input:radio:checked").val();
// console.log(sex);
//取出地址
var address = $("#sheng").val()+"-"+$("#shi").val();
//添加到表格
var tr = "<tr><td>"+username+"</td><td>"+sex+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>";
$("#t").append(tr);
//不想跳转，返回false
return false;
});
//删除的方法
function dele(t){
t.parentNode.parentNode.remove();
}
</script>
</body>
</html>

阅读全文

0 0