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

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

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

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
  7. </head>
  8. <body>
  9.     <div>
  10.         <table>
  11.             <tr>
  12.                 <td>省份城市</td>
  13.                 <td>
  14.                     <select name="province" id="province">
  15.                         <option value="">请选择省份</option>
  16.                     </select>
  17.                     <select name="city" id="city">
  18.                         <option value="">请选择城市</option>
  19.                     </select>
  20.                 </td>
  21.             </tr>
  22.         </table>
  23.     </div>
  24.     <script type="text/javascript">
  25.         $(function(){
  26.             //页面加载完毕后开始执行的事件
  27.             var city_json='{"江苏":["南京","常州"],"河南":["南阳","安阳"]}';
  28.             var city_obj=eval('('+city_json+')');
  29.             for (var key in city_obj)
  30.             {
  31.                 $("#province").append("<option value='"+key+"'>"+key+"</option>");
  32.             }
  33.             $("#province").change(function(){
  34.                 var now_province=$(this).val();
  35.                 $("#city").html('<option value="">请选择城市</option>');
  36.                 for(var k in city_obj[now_province])
  37.                 {
  38.                     var now_city=city_obj[now_province][k];
  39.                     $("#city").append('<option value="'+now_city+'">'+now_city+'</option>');
  40.                 }
  41.             });
  42.         });
  43.     </script>
  44. </body>
  45. </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. windows+Linux【Composer安装指定版本laravel】

    在windows下安装的方法:(php.ini中openssl.dll扩展必须打开,且版本>=5.4) 方法一:使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运 ...

  2. Python 常见错误及解决办法

    错误: Traceback (most recent call last): File "I:/Papers/consumer/codeandpaper/RegressionandGBDTa ...

  3. Android_WebServices_源代码分析

    本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/38037989 在Android_WebServices_介绍一文中, ...

  4. MySQL错误代码大全(史上最全)

    用任何主机语言调用MySQL时可能出现的错误.首先,列出了服务器错误消息.其次列出了客户端程序消息. B.1. 服务器错误代码和消息  服务器错误信息来自下述源文件: · 错误消息信息列在share/ ...

  5. 关于搭配junit 和JUnit报initializationError的解决方法

    关于junit是什么就不复述了,网上有 junit的source code是可以下载的,各个版本都有 地址:https://github.com/junit-team 通过junit 的source ...

  6. java中==和equals和hashcode的区别详解

    一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...

  7. 479. Second Max of Array【easy】

    Find the second max number in a given array. Notice You can assume the array contains at least two n ...

  8. 在ajax请求体外得到请求 数据

    function sendAjax() { $.ajax({ type: "post", url: "/flow/process/trace.afca?pid=" ...

  9. ThreadPoolExecutor线程池解析与BlockingQueue的三种实现

    目的 主要介绍ThreadPoolExecutor的用法,和较浅显的认识,场景的使用方案等等,比较忙碌,如果有错误还请大家指出 ThreadPoolExecutor介绍 ThreadPoolExecu ...

  10. C++链接ODBC数据源：VS2013,Access

    参考资料:1.http://wenku.baidu.com/view/a92d1a812cc58bd63186bd8d.html 2.http://blog.sina.com.cn/s/blog_68 ...