您的位置：首页 > 其它

二级联动实现省市表单添加删除操作

2017-11-23 10:41 155 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 表单二级联动

相关文章推荐

新的分享

章节导航