<!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> | |
<!-- | |
逻辑代码 | |
1.界面 | |
2.获取名字,验证是否为空 | |
3.获取性别 | |
4.获取地址 | |
5.添加到页面 | |
6.实现删除功能 | |
--> | |
<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> | |
表单验证 二级联动 添加 删除
最新推荐文章于 2022-03-06 19:29:09 发布