添加列表和省市联动

来源：互联网发布：淘宝专享打折怎么设置编辑：程序博客网时间：2024/04/26 02:45

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table{
border: 1px solid red;
width: 600px;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="lib/angular.min.js"></script>
<script>
$(document).ready(function(){

var flag=true;
$("#name").blur(function(){
if($("#name").val()==null||$("#name").val()==""){
$("#namespan").html("用户名不能为空");
flag=false;
}else{
$("#namespan").html("√");
}
});
$("#email").blur(function(){
var str=$("#email").val();
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
var v=reg.test(str);
if(!v){
$("#emailspan").html("邮箱格式不对");
flag=false;
}else{
$("#emailspan").html("√");
}
});
$("#dianhua").blur(function(){
var dian=$("#dianhua").val();
var res=/^1[3|4|5|8][0-9]\d{4,8}$/;
var d=res.test(dian);
if(!d){
$("#dianhuaspan").html("不是完整的11位手机号码或者正确的手机号前七位");
flag=false;
}else{
$("#dianhuaspan").html("√");
}

});

var shengfen = [["邯郸", "仓州"], ["安阳", "洛阳"]];
//给省份选项改变的事件
$("#pro").change(function() {
//清空上次
$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});

$("#btn").click(function(){
var name=$("#name").val();
var email=$("#email").val();
var dianhua=$("#dianhua").val();
var sheng=$("option:checked").html();
var shi=$("#city").val();

var tdname=$("<td></td>").html(name);
var tdemail=$("<td></td>").html(email);
var tddianhua=$("<td></td>").html(dianhua);
var tdshengq=$("<td></td>").html(sheng);
var tdshiq=$("<td></td>").html(shi);
var tdbuttin=$("<td><button>删除</button></td>");
var tr=$("<tr></tr>");
tr.append(tdname);
tr.append(tdemail);
tr.append(tddianhua);
tr.append(tdshengq);
tr.append(tdshiq);
tr.append(tdbuttin);

$("tbody").append(tr);
$("button").click(function(){
$(this).parent().parent().remove();
});

});

});
</script>

</head>
<body>
<h1>添加用户</h1>
姓名:<input type="text" id="name" /><span id="namespan"></span><br />
email:<input type="email" id="email" /><span id="emailspan"></span><br />
电话:<input type="text" id="dianhua" /><span id="dianhuaspan"></span><br />
<select id="pro">
<option>---请选择省份</option>
<option value="0">河北省</option>
<option value="1">河南省</option>
</select>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>
</div><br />
</div>
<input type="button" value="添加" id="btn" /><br />

<table>
<thead>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>删除</th>
</thead>
<tbody></tbody>
</table>

</body>
</html>

阅读全文

0 0