JQuery二级联动

最新推荐文章于 2023-10-25 13:54:02 发布

Gybk123

最新推荐文章于 2023-10-25 13:54:02 发布

阅读量628

点赞数

本文链接：https://blog.csdn.net/Gybk123/article/details/78513495

版权

<!DOCTYPE html>
<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("<option>"+sheng+"</option>");
           }
           //-----------------------------------市----
           //当省的下拉改变的时候，市做相应的显示
           $("#sheng").change(function(){
               //每次清空一下，防止重复
               $("#shi").empty();
               $("#shi").append("<option>--市--</option>");
               //根据省取出市，放入第二个下拉菜单
               var s1 = $("#sheng").val();
               var shis = arr[s1];//shis是个数组
               for(shi in shis){
                   var s2 = shis[shi];
                   $("#shi").append("<option>"+s2+"</option>");
               }
           });
           //表单验证
           $("#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 = "<tr><td>"+username+"</td><td>"+sex+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>";
               $("#t").append(tr);
               //不想跳转，返回false
               return false;
           });
           //删除的方法
           function dele(a){
               a.parentNode.parentNode.remove();
           }
        </script>
   </body>
</html>