当填表的时候会让你设计某省某市怎么设计，应该明白，如果你选择了一个确定的省，那么在第二个下拉框内则不会有除了你选择的省的市之外的名称。而这功能用js来实现很麻烦，但是用jq确很容易实现。

原表结构：

代码如下：

<!DOCTYPE html>

<html>

<head>

<script typr="text/javascript" src="js/jquery-1.8.3.js"></script>

<script>

        var cities=new Array(3);

        cities[0]=new Array("武汉市","黄冈市","襄阳市","荆州市");

        cities[1]=new Array("长沙市","郴州市","株洲市","岳阳市");

        cities[2]=new Array("石家庄市","邯郸市","唐山市","秦皇岛市");

        cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");

    $(function() {

        $("#province").change(function() {//change时间，表示下拉框的内容改变，则会提示点击了省份

//         alert("点击了省份");

        var val=this.value;//获取用户选择的省份

//         alert(val);

        $.each(cities,function(i,n){//遍历城市

//             alert(i+" "+n);

        if(val==i){//如果相等

            $.each(cities[i],function(j,m){//遍历第二个下拉框内容

//                 alert(m);

        var textNode =document.createTextNode(m);//创建城市的文本节点

        var opele=document.createElement("option");//创建option元素节点

        $(opele).append(textNode);//将城市文本节点添加到option元素中

        $(opele).appendTo($("#city"));//将内容添加到第二个下拉框中，使用id选择器。

            })

        }

        })

        });

    });

</script>

<meta charset="UTF-8">

<title>使用jQuery完成省市二级联动</title>

<style type="text/css">

.top {

    border: 1px solid red;

    width: 32.9%;

    height: 50px;

    float: left;

}

#clear {

    clear: both;

}

#menu {

    border: 1px solid blue;

    width: 99%;

    height: 40px;

    background-color: black;

}

#menu ul li {

    display: inline;

    color: white;

    font-size: 19px;

}

#bottom {

    text-align: center;

}

#contanier {

    border: 1px solid red;

    width: 99%;

    height: 600px;

    background: url(../img/regist_bg.jpg);

    position: relative;

}

#content {

    border: 5px solid gray;

    width: 50%;

    height: 60%;

    position: absolute;

    top: 100px;

    left: 300px;

    background-color: white;

    padding-top: 50px;

}

</style>

<script src="../js/check1.js"></script>

</head>

<body>

    <div>

        <div id="contanier">

            <div id="content">

                <table border="1" align="center" cellpadding="0" cellspacing="0"

                    width="70%" height="70%" bgcolor="white">

                    <form method="get" action="#" onsubmit="return checkForm()">

                        <tr>

                            <td colspan="2" align="center"><font size="5">会员注册</font></td>

                        </tr>

                        <tr>

                            <td>用户名</td>

                            <td><input type="text" name="username" id="username"

                                onfocus="showTips('username','必须以字母开头')"

                                onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>

                            </td>

                        </tr>

                        <tr>

                            <td>密码</td>

                            <td><input type="password" name="password" id="password"

                                onfocus="showTips('password','密码长度不能低于6位！')"

                                onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>

                            </td>

                        </tr>

                        <tr>

                            <td>确认密码</td>

                            <td><input type="password" name="repassword" /></td>

                        </tr>

                        <tr>

                            <td>email</td>

                            <td><input type="text" name="email" id="email" /></td>

                        </tr>

                        <tr>

                            <td>姓名</td>

                            <td><input type="text" name="name" /></td>

                        </tr>

                        <!--1.编写HTML文件部分的内容-->

                        <tr>

                            <td>籍贯</td>

                            <td>

                                <!--2.确定事件，通过函数传参的方式拿到改变后的城市--> <select id="province">

                                    <option>--请选择--</option>

                                    <option value="0">湖北</option>

                                    <option value="1">湖南</option>

                                    <option value="2">河北</option>

                                    <option value="3">河南</option>

                            </select> <select id="city">

                            </select>

                            </td>

                        </tr>

                        <tr>

                            <td>性别</td>

                            <td><input type="radio" name="sex" value="男" />男 <input

                                type="radio" name="sex" value="女" />女</td>

                        </tr>

                        <tr>

                            <td>出生日期</td>

                            <td><input type="text" name="birthday" /></td>

                        </tr>

                        <tr>

                            <td>验证码</td>

                            <td><input type="text" name="yanzhengma" /> <img

                                src="../img/yanzhengma.png" /></td>

                        </tr>

                        <tr>

                            <td colspan="2"><input type="submit" value="注册" /></td>

                        </tr>

                    </form>

                </table>

            </div>

        </div>

    </div>

</body>

</html>

运行结果

体会：完成一个项目可能有很多方法，但是有的简单，有的困难，因此要选取简单的进行使用。

另外，每次完成一小步，就要检测一次，哪怕最后注释掉，也不要认为自己能一蹴而成，因为一步一步完成出错好改，但是全都完成了，找错都不容易找出来，更别说改错了，因此要养成这个好习惯。

jQuery_完成省市二级联动的更多相关文章

  1. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  2. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  3. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  4. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  5. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  7. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

  8. 用jquery+Asp.Net实现省市二级联动

    页面html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax. ...

  9. jquery 实现省市二级联动，附带完整的省市json数据 （粘贴即用）

    1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...

随机推荐

  1. C语言Ⅰ作业12—学期总结

    一.我学到的内容 二.我的收获 作业链接 收获 C语言Ⅰ博客作业01 认识了PTA编程,博客园,Markdown基本语法1,Markdown基本语法2 C语言Ⅰ博客作业02 PTA系统常见问题解答 C ...

  2. Java细节----method和function的区别

    面向对象的语言叫方法 面向过程的语言叫函数 在java中没有函数这么一说,只有方法一说.属于概念上的区别. 硬要说区别. Method必须依赖于Object. Function 是独立的,不需要依赖于 ...

  3. Python 入门之 内置模块 -- re模块

    Python 入门之 内置模块 -- re模块 1.re 模块 (1)什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类 ...

  4. 如何用vue封装一个防用户删除的平铺页面的水印组件

    需求 为了防止截图等安全问题,在web项目页面中生成一个平铺全屏的水印 要求水印内容为用户名,水印节点用户不能通过开发者工具等删除 效果 如上图 在body节点下插入水印DOM节点,水印节点覆盖在页面 ...

  5. ckfinder的使用

    引入<script type="text/javascript" src="${ctxStatic}/ckfinder/ckfinder.js">& ...

  6. c#获取网络时间

    public static DateTime GetInternetDate()        {            var client = new TcpClient("time.n ...

  7. MySQL索引优化 笔记

    少取字段,建立合理的索引 表优化: 1 定长与变长分离 如果都是定长 查询比较快 因为每一行的字节都是固定的 fixed 2 常用字段和不常用字段要分离 用户表 常用 放主表 个人介绍不常用 还比较长 ...

  8. nginx的服务架构

    nginx服务架构 模块 习惯上将nginx的模块分成核心模块,HTTP模块,邮件模块,以及第三方模块 核心模块主要包含两类功能的支持,一类是主体功能,包括进程管理,权限管理错误日志解析,配置解析:另 ...

  9. keepalived启动后报错：(VI_1): received an invalid passwd!的解决办法

    一.配置好keepalived.conf文件后,启动keepalived,查看/var/log/message日志报错: [root@push-- sbin]# tail -f /var/log/me ...

  10. JDK12的安装搭建

    JDK12的安装搭建 一.JDK下载 ​ 1.JDK官网下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk12-down ...