先用php生成一个json数组示例如下

JSON_UNESCAPED_UNICODE 是对汉字进行处理的参数

然后HTML代码如下 把那个json_city赋值成我们用php生成的json即可

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

</head>

<body>

    <div>

        <table>

            <tr>

                <td>省份城市</td>

                <td>

                    <select name="province" id="province">

                        <option value="">请选择省份</option>

                    </select>

                    <select name="city" id="city">

                        <option value="">请选择城市</option>

                    </select>

                </td>

            </tr>

        </table>

    </div>

    <script type="text/javascript">

        $(function(){

            //页面加载完毕后开始执行的事件

            var city_json='{"江苏":["南京","常州"],"河南":["南阳","安阳"]}';

            var city_obj=eval('('+city_json+')');

            for (var key in city_obj)

            {

                $("#province").append("<option value='"+key+"'>"+key+"</option>");

            }

            $("#province").change(function(){

                var now_province=$(this).val();

                $("#city").html('<option value="">请选择城市</option>');

                for(var k in city_obj[now_province])

                {

                    var now_city=city_obj[now_province][k];

                    $("#city").append('<option value="'+now_city+'">'+now_city+'</option>');

                }

            });

        });

    </script>

</body>

</html>

效果如下

jquery书写一个简易的二级联动的更多相关文章

  1. jQuery 开发一个简易插件

    jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...

  2. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  3. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  4. 使用jquery.ajax实现省市的二级联动(SSH架构)

    首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...

  5. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  6. jquery实现城市选择器效果(二级联动)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  9. <select>简易的二级联动

    1.首先是表单页面: <tr> <td align="right"> <label class="Validform_label" ...

随机推荐

  1. SpringMVC与SiteMesh

    SpringMVC与SiteMesh2.4无缝整合并借助JSR303规范实现表单验证 SiteMesh3.0的下载,简介与使用 总结: springmvc结合sitemesh总共分三步: 1.添加si ...

  2. HTTP管线化技术--ajax请求

    1.管线化技术——客户端可以发送多次请求到服务端,而不需要等待上一次请求得到响应的时候才能进行下一次请求.实现并行发送请求 2.ajax——实现网页异步刷新 问题:当用户进行多次ajax请求的时候,并 ...

  3. [svc]salt基本原理

    转载自:来自:http://tech.mainwise.cn/?p=438 说明:salt是一个异构平台基础设置管理工具(虽然我们通常只用在Linux上),使用轻量级的通讯器ZMQ,用Python写成 ...

  4. UITableView__cell 距tableview顶端有间距

    UITableView__cell 距tableview顶端有间距     如何去掉这个间距呢?解决方法如下: //top 为cell距顶端的间距 (一般为负值) self.formTable.con ...

  5. firewalld增加端口访问权限

    firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --reload

  6. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  7. 悦铃文件必须是CCITT A_Law格式的，且没有被压缩

    最近在给公司弄来电彩铃,用的是电信的“悦铃”业务,办理过程不想多说了..给了我个网址和账号让我登录,登录界面惨不忍睹,感觉电信根本没有要宣传这项业务的意思,像是粗制滥造外包赶工做出来的.. 当然这不是 ...

  8. [shell]简单的shell提示和参数脚本

    该shell脚本有如下点: bash or dash case语句的写法 脚本help写法 参数是否为空的写法 算数运算的写法 #! /bin/bash case "$1" in ...

  9. keepalived管理LVS文件详解

    #全局设置,只设置一个 全局路由就可以,全局路由不能重复唯一标识. global_defs { router_id LVS_01 #全局路由ID,唯一不能重复 } #实例 vrrp_instance ...

  10. 关于Unity的C#基础学习（一）

    一.程序包含 1.数据:运行过程中产生的 2.代码:代码指令 数据和代码都是存放到内存中的,代码指令在程序加载的时候放到内存,数据是在程序运行的时候在内存中动态地生成,随时会被回收,要定义变量来存放数 ...