二级联动

最新推荐文章于 2024-07-04 12:03:06 发布

原创最新推荐文章于 2024-07-04 12:03:06 发布 · 190 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .div{
    border: 1px solid black;
    width: 800px;
    height: 500px;
   }
   #div1{
    margin-top: 40px;
    margin-left: 40px;
   }
   .div .bg tr:nth-child(1){
            background: gold;
        }
        .div .bg tr:nth-child(2n){
            background: greenyellow;
        }
        .btn{
        background-color: #FFD700;
        }
  </style>
  <script src="../libs/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
   var city=['北京','河北'];
   var district=[['海淀区','朝阳','东城'],
                 ['保定','石家庄','秦皇岛']
   ];
   window.onload=function(){
      createCity();
        document.getElementById("city").onchange= createDistrict;
    };
    function createCity(){
        //获得1级菜单select
        var ci = document.getElementById("city");
        //为1级菜单select添加option
        for(var i in city){
            var op = new Option(city[i],city[i]);
            ci.options.add(op);
        }
    }
    function createDistrict(){
        //获取当前选中的一级菜单的选项的下标
        var index = document.getElementById("city").selectedIndex;
        //获得2级菜单select
        var di = document.getElementById("district");
        //清空二级菜单选项
        di.options.length=0;
        //为2级菜单select添加option
        for(var i in district[index]){
            var op = new Option(district[index][i],district[index][i]);
            di.options.add(op);
        }
   }
         function add(){
         //数字与字母的组合
           var zhang=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
            var b1 = false;
            var b2 = false;
            var b3 = false;
            var name = $("#name").val();
            var birthday1 = $("#aihao1").val();
            var birthday2 = $("#aihao2").val();
            var man = $("#man").val();
//          var woman = $("#woman").val();
            var sel = $("#district").val();
            var cs = $("#city").val();
            if(name == ""){
                b1 = false;
            }else if(name.length < 6 || name.length >13 || !zhang.test($name)){
                b1 = false;
            }else{
                b1 = true;
            }
            if(birthday1 == ""){
                b2 = false;
            }else{
                b2 = true;
            }
            if(birthday2 == ""){
                b3 = false;
            }else{
                b3 = true;
            }
            if(b1 == false || b2 == false || b3 == false){
                alert("输入信息有误");
            }else{
                $(".bg").append("<tr>" +
                "<td><input type='checkbox' name='ck' ></td>" +
                "<td>" + name +"</td>" +
                "<td>" + man +"</td>" +
                "<td>" + birthday1+birthday2 +"</td>" +
                "<td>" + cs + "-" + sel +"</td>" +
                "<td><input type='button' onclick='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="div">
   <div id="div1">
    姓名:<input type="text" id="name" /><br /><br />
    性别:<input type="radio" id="man" name="sex" value="男" checked="checked" />男<br />
          <input id="woman" type="radio" name="sex" value="女" />女<br /><br />
    爱好:<input type="checkbox" id="aihao1" value="唱歌" />唱歌<br />
          <input type="checkbox" id="aihao2" value="睡觉" checked="checked" />睡觉<br />
          <input type="checkbox" id="aihao3" value="游戏" />游戏<br />
           籍贯:<select id="city"></select>
               <select id="district"></select><br /><br />
           
       <button onclick="add()" class="btn">注册</button>
   </div>
  </div>
  <div class="div">
   <table border="1" cellspacing="0" cellpadding="0" class="bg">
    <tr>
     <td><input type="checkbox" onclick="cheAll()" id="che"></td>
                <td>姓名</td>
                <td>性别</td>
                <td>爱好</td>
                <td>籍贯</td>
                <td>操作</td>
    </tr>
   </table>
   <input type="button" onclick="delAll()" value="批量删除" />
        <input type="button" onclick="che()" value="全选/反选" />
  </div>
</body>
</html>