二级联动实现省市表单添加删除操作


<html>
    <head>
        <meta charset="utf-8" />
        <title>二级联动title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8">script>
    head>

    <body>
        <form action="#" id="f">
            用户名:<input type="text" id="username"  />
            <span id="nametip">span><br>
            性别:<input type="radio"   name="sex" value="男"/><input type="radio"   name="sex" value="女"/><br>

            地址:
            <select id="sheng">
                <option>--省--option>
            select>
            <select id="shi">
                <option>--市--option>
            select>
            <br>
            <input type="submit" value="注册"/>
        form>

        <table border="1px" cellspacing="0px" cellpadding="0px" id="t">
            <tr>
                <td>用户名td>
                <td>性别td>
                <td>地址td>
                <td>操作td>
            tr>
        table>

        
        <script type="text/javascript">
            //页面加载的时候,就要将省的信息,和市的信息添加到页面
            var arr = new Array();
            arr["山东"]=new Array("青岛","济南","聊城");
            arr["山西"]=new Array("运城","太原","临汾");
            //先将省放入第一个下拉菜单
            for(sheng in arr){
                $("#sheng").append("+sheng+"");
            }

            //-----------------------------------市----
            //当省的下拉改变的时候,市做相应的显示
            $("#sheng").change(function(){
                //每次清空一下,防止重复
                $("#shi").empty();
                $("#shi").append("");
                //根据省取出市,放入第二个下拉菜单
                var s1 = $("#sheng").val();
                var shis = arr[s1];//shis是个数组
                for(shi in shis){
                    var s2 = shis[shi];
                    $("#shi").append("+s2+"");
                }
            });

            //表单验证
            $("#f").submit(function(){
                //获取名字,验证是否为空
                var username = $("#username").val();
                if (username=="") {
                    //提示
                    $("#nametip").html("用户名不能为空");
                    //变色
                    $("#nametip").css({"color":"red"});
                    return;//结束方法
                }else{
                    $("#nametip").html("");
                }
                //获取性别
                var sex = $("input[type=radio]:checked").val();
                //var sex = $("input:radio:checked").val();  另一种写法
                //console.log(sex);
                //取出地址
                var address = $("#sheng").val()+"-"+$("#shi").val();
                //添加到表格
                var tr = ""+username+""+sex+""+address+"";
                $("#t").append(tr);
                //不想跳转,返回false
                return false;
            });
            //删除的方法
            function dele(t){
                t.parentNode.parentNode.remove();
            }
        script>
    body>
html>

你可能感兴趣的:(前端h5,css3,javascript...)