jQuery 表单城市二级联动

唐僧吃烤肉

于 2017-12-20 19:31:02 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/YanZhe777/article/details/78856682

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.box{
width: 800px;
height: 500px;
margin: 20px auto;
padding: 10px;
}
.box table:nth-child(1){
width: 780px;
margin-bottom: 5px;
}
.box table:nth-child(1) tr td{
height: 30px;
}
.box table:nth-child(1) tr td input{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td select{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td .btn{
border-radius: 5px;
border: 1px solid #666666;
}
.box>input{
width: 70px;
height: 28px;
float: right;
border-radius: 5px;
border: 1px solid #666666;
margin-left: 30px;
margin-bottom: 5px;
}
.box>input:nth-child(3){
}
.box>input:nth-child(2){
}
.box .bg{
width: 780px;
margin-bottom: 5px;
}
.box .bg tr:nth-child(1){
}
.box .bg tr:nth-child(2n){
}
</style>
<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
var city = $("#city").val();
var regions = [["西二旗","天通苑","南邵"],["安阳","濮阳","信阳","南阳","洛阳"],["石家庄","邯郸","承德","沧州","廊坊"]];
for(var i = 0; i < regions[city].length; i++){
var op = $("<option></option>");
console.log("---",regions[city][i]);
op.text(regions[city][i]);
$("#region").append(op);
}
$("#city").change(function(){
city = $(this).val();
$("#region").empty();
for(var i = 0; i < regions[city].length; i++){
var op = $("<option></option>");
console.log("---",regions[city][i]);
op.text(regions[city][i]);
$("#region").append(op);
}
});
});
function add(){
var b1 = false;
var b2 = false;
var name = $("#name").val();
var birthday = $("#birthday").val();
var sex = $("#sex").val();
var sel = $("#region").val();
var cs = $("#city option:selected").html();

if(name == ""){
b1 = false;
}else if(name.length < 3 || name.length >30){
b1 = false;
}else{
b1 = true;
}

if(birthday == ""){
b2 = false;
}else{
b2 = true;
}

if(b1 == false || b2 == false){
alert("输入信息有误");
}else{
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + sex +"</td>" +
"<td>" + birthday +"</td>" +
"<td>" + cs + "-" + sel +"</td>" +
"<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
"</tr>");
}

}
function del(p){
var f = confirm("确认删除!!!");
if(!f){
return;
}
p.parentNode.parentNode.remove();
}
function cheAll(){
var cek = $("#che")[0].checked;
var ck = $("input[name='ck']");
for(var i = 0; i < ck.length; i++){
ck[i].checked = cek;
}
}
function che(){
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++) {
cks[i].checked = !cks[i].checked;
}
}
function delAll(){
var ck = $("input:checked[name='ck']");
if(ck.length == 0){
alert("请选择,然后进行删除");
return;
}
var f=confirm("确认删除!!");
if(!f){
return;
}
for(var i = 0; i < ck.length; i++){
ck[i].parentNode.parentNode.remove();
}
}
</script>
</head>
<body>
<div class="box">
<table>
<tr>
<td>姓名：<input type="text" id="name"></td>
<td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
<td>生日：<input type="text" id="birthday"></td>
<td>住址：
<select id="city">
<option value="0">北京</option>
<option value="1">河南</option>
<option value="2">河北</option>
</select>
<select id="region">
</select>
</td>
<td><input type="button" οnclick="add()" value="添加" class="btn"></td>
</tr>
</table>
<input type="button" οnclick="delAll()" value="批量删除" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" οnclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>