有关于省级联动的javascript案例

最新推荐文章于 2022-10-10 02:31:36 发布

程序员的美腻

最新推荐文章于 2022-10-10 02:31:36 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/qq_40087961/article/details/78516637

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        td {
            text-align: center;
        }
    </style>
    <script src="jquery.1.12.4.js "></script>
    <script>
        $(function() {
            var arr = [
                ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]
                ,
                ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]
                ,
                ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]
                ,
                ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]
            ];
            var flag1 = false;
            var flag2 = false;
            var flag3 = false;
            var flag4 = false;
            //获取元素
            var $name = $("#name");
            var $pwd = $("#pwd");
            var $age = $("#age");
            var $city = $("#city");

            $name.blur(function() {
                if($name.val() == "") {
                    alert("请输入用户名");
                    flag1 = false;
                } else {
                    flag1 = true;
                }
            });

            $pwd.blur(function() {
                var $pl = $pwd.val().length;
                if($pl > 4 && $pl < 16) {
                    flag2 = true;
                } else {
                    alert("长度在4-16位之间");
                    flag2 = false;
                }
            });

            $age.blur(function() {
                if($age.val() < 1 || $age.val() > 300) {
                    alert("请输入正确的年龄");
                    flag3 = false;
                } else {
                    flag3 = true;
                }
            });

            $city.change(function(){
                $("#city2 option").remove();
                var ind = $(this).val();
                alert(ind);
                for(c in arr[ind]){
                    var $c2 = $("#city2");
                    var cs = $("<option>"+arr[ind][c]+"</option>");
                    $c2.append(cs);
                }
            });


            //提交按钮点击事件
            $("#tj").click(function() {

                if(flag1 && flag2 && flag3){
                    var $nameV = $("#name").val();
                    var $pwdV = $("#pwd").val();
                    var $ageV = $("#age").val();
                    var $sexV = $("input[name='sex']:checked").val();
                    var $cityV = $("#city option:selected").html();
                    var $city2V = $("#city2 option:selected").html();
                    var $data = $("#data");
                    var $a = $("<tr><td><input type='checkbox'></td><td>"+$nameV+"</td><td>"+$pwdV+"</td><td>"+$ageV+"</td><td>"+$sexV+"</td><td>"+$cityV+"-"+$city2V+"</td></tr>");
                    $data.append($a);

                }else{
                    alert("请按要求输入信息");
                }
            });

        });
    </script>
    <!--全选，全不选-->
    <script>
        //页面加载完成
        $(function(){
            //选中全选
            $("#all").click(function(){
                //判断状态
                var fl = $(this).prop("checked");
                if(fl){
                    //全选
                    var $ch = $(":checkbox");
                    $ch.each(function(index, element) {
                        $ch[index].checked=true;
                    });
                }else{
                    //全不选
                    var $ch = $(":checkbox");
                    $ch.each(function(index, element) {
                        $ch[index].checked=false;
                    });
                }
            });
            //批量删除，点击删除，删除选中的元素
            $("#del").click(function(){
                //data表格下有是checked且没有id属性的都删除
                $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


            })


        });
    </script>
</head>

<body>
<center>
    <h2>用户注册</h2>
    <table border="1px" cellpadding="10px" cellspacing="0px">
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="用户名不能为空" id="name" /></td>
        </tr>
        </tr>
        <td>密　码</td>
        <td><input type="password" placeholder="长度在4-16位之间" id="pwd" /></td>
        </tr>
        </tr>
        <td>年　龄</td>
        <td><input type="number" placeholder="年龄必须是数字" id="age" /></td>
        </tr>
        </tr>
        <td>性　别</td>
        <td><input type="radio" value="男" name="sex" checked="checked"/>男
            <input type="radio" value="女" name="sex" />女</td>
        </tr>
        <tr>
            <td>住　址</td>
            <td>省
                <select id="city">
                    <option value=0>北京</option>
                    <option value=1>上海</option>
                    <option value=2>天津</option>
                    <option value=3>重庆</option>
                </select>
                市
                <select id="city2">
                    <option>东城区</option>
                    </section>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button id="tj">提交</button></td>
        </tr>
    </table>
    <button id="del">批量删除</button>
    <table border="1px" cellpadding="10px" cellspacing="0px" id="data">
        <tr>
            <td><input type="checkbox" id="all"></td>
            <td>用户名</td>
            <td>密　码</td>
            <td>年　龄</td>
            <td>性　别</td>
            <td>住　址</td>
        </tr>
    </table>
</center>
</body>

</html>

程序员的美腻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关于省级联动的javascript案例

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; td { text-align: center; }
复制链接

扫一扫