二级联动+增删

最新推荐文章于 2022-11-23 14:30:19 发布
Gemini_骑士
最新推荐文章于 2022-11-23 14:30:19 发布
阅读量196
点赞数
文章标签：二级联动
本文链接：https://blog.csdn.net/qq_39923392/article/details/78516632
版权
<!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>