二级联动+增删

来源：互联网发布：淘宝专享打折怎么设置编辑：程序博客网时间：2024/04/19 14:04
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            *{                margin: 0 auto;            }            div{                width: 1200px;                text-align: center;            }        </style>        <script src="js/jquery-2.1.0.js"></script>        <script>            $(function(){                var ok1 =true;                var ok2 =true;                var ok3 =true;                    //姓名                    $("#in1").blur(function(){                        var in1 = $("#in1").val();                        if(in1.length == 0){                            ok1 = true;                            return;                        }else{                            ok1 = false;                        }                    });                    //邮箱                    $("#in2").blur(function(){                        var in2 = $("#in2").val();                        var you = /@/;                        if(!in2.match(you)){                            ok2 = true;                            return;                        }else{                            ok2 = false;                        }                    });                    //电话                    $("#in3").blur(function(){                        var in3 = $("#in3").val();                        if(in3.length < 8 || in3.length>11){                            ok3 = true;                            return;                        }else{                            ok3 = false;                        }                    });                       //点击添加按钮                    $("#in6").click(function(){                        if(ok1 == false){                            $("#sp1").css("color","lightblue");                            $("#sp1").html("√");                        }else{                            $("#sp1").css("color","red");                            $("#sp1").html("姓名不能为空");                            return;                        }                        if(ok2 == false){                            $("#sp2").css("color","lightblue");                            $("#sp2").html("√");                        }else{                            $("#sp2").css("color","red");                            $("#sp2").html("邮箱格式不正确");                                return;                        }                        if(ok3 == false){                            $("#sp3").css("color","lightblue");                            $("#sp3").html("√");                        }else{                            $("#sp3").css("color","red");                            $("#sp3").html("电话长度不正确");                                return;                        }                        //添加到表格                        if(ok1 ==false && ok2 == false && ok3 == false){                            //赋值                           var tr = $("<tr><td>"+$("#in1").val()+"</td><td>"+$("#in2").val()+"</td><td>"+$("#in3").val()+"</td><td>"+$("#province").val()+"</td><td>"+$("#city").val()+"</td><td><a href='#' onclick='shan(this)'>Delete</a></td></tr>");                            //在放入tbody中                            var tab = $("#tab");                            tab.append(tr);                            tab[0].style.display = "block";                       }                    });            });            //点击删除            function shan(obj){                var tr=$(obj).parent().parent();                tr.remove();            }            ////省市联动            // 创建一个二维数组                var arr = new Array(2);                arr[0] = ["广东","广州","深圳","佛山"];                arr[1] = ["湖北","荆州","武汉","赤壁"];                function choose(val){                    // 获取city的select                    var city = document.getElementById("city");                    // 获取option                    var cityOp = city.getElementsByTagName("option");                    // 设置可操作                    city.disabled = false;                    // 先删除，后添加                    for (var i = 0; i < cityOp.length; i++) {                        var op = cityOp[i];                        // 删除option                        city.removeChild(op);                        //数组长度发生变化，需处理                        i--;                    }                    // 遍历                    for (var i = 0; i < arr.length; i++) {                        //取一维数组                        var arr1 = arr[i];                        //取一维数组的第一个值                        var firstVal = arr1[0];                        //判断                        if(firstVal == val){                            //遍历                            for (var j = 1; j < arr1.length; j++) {                                // 获取城市名                                var value = arr1[j];                                // 创建option                                var optionl = document.createElement("option");                                // 创建文本                                var textl = document.createTextNode(value);                                // 把文本添加到标签                                optionl.appendChild(textl);                                //添加到city里面                                city.appendChild(optionl);                            }                        }                    }                }        </script>    </head>    <body>        <div>            姓名：<input id="in1" placeholder="请输入姓名"/><span id="sp1"></span><br />            email：<input id="in2" placeholder="请输入邮箱"/><span id="sp2"></span><br />            电话：<input id="in3" placeholder="请输入手机号"/><span id="sp3"></span><br />            省份：<select id="province" onchange="choose(this.value)">                <option value="0">--请选择省--</option>                <option value="广东">广东</option>                <option value="湖北">湖北</option>            </select>     <br />              城市：  <select id="city" disabled="disabled">                <option value="0">--请选择市--</option>            </select>       <br />             <input type="submit" value="添加" id="in6"/><span id="sp6"></span>        <table border="1px" id="tab" width="350px" style="margin: auto;">            <tr>                <td>姓名</td>                <td>email</td>                <td>电话</td>                <td>省份</td>                <td>城市</td>                <td>操作</td>            </tr>        </table>        </div>    </body></html>
阅读全文
0 0