本文为博主原创，转载请注明。

首先看一下实现后的效果图：

当然，要完成这个实验，mysql必须与数据库连接，这里选用navicat for mysql这款软件，它与mysql的契合度是很高的，配置环境不多赘述，注意修改一下php的配置文件php.ini文件，将mysql.dll前面的那个“;”去掉，不然总会报数据库连接函数的错。

将以上配置好后就进入代码阶段了，闲话不多说，直接上代码：

//2-7-3.php:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>省市级联菜单</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

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

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

                var data = {

                    "pid":pid

                };

                console.log(data);

                $.post("getCity.php",data,function(response){

                    console.log(response);

                    // JSON.stringify(res);

                    // console.log(json_decode(response));

                    // document.write('afdadf ');

                    $("#city").html(response);

                })

            })

        })

</script>

</head>

<body>

     <select id="province">

            <option>请选择省份</option>

            <?php

                mysql_connect("localhost", "root", "123456");

                mysql_select_db("lession");

                mysql_query("set names utf8");

                $sql = "select * from province";

                $res = mysql_query($sql);

                while ($row = mysql_fetch_assoc($res)) {

                    echo "<option value=\"{$row['id']}\">{$row['name']}</option>";

                }

            ?>

    </select>

    <select id="city">

    <option>选择城市</option>

</select>

</body>

</html>

然后是后台服务器端的代码：

//getCity.php:
<?php

if (isset($_POST["pid"]) && $_POST["pid"]) {

    $pid = $_POST['pid'];

    var_dump($pid);

}

// $pid = $_POST['pid'];

$link = mysql_connect("localhost", "root", "123456"); //单个数据库可以省略变量返回值

mysql_select_db("lession",$link);

mysql_query("set names utf8");

$sql = "select * from city where province_id={$pid}";

$res = mysql_query($sql);

$citys = array();

if ($res) {

    while ($row = mysql_fetch_assoc($res)) {

     echo "<option value='{$row['id']}'>{$row['name']}</option>";

    // $citys[] = array("id"=> $row['id'], 'name'=> $row['name']);

    }

// echo json_encode($citys);

}

对了，忘记交代了：前面的数据库命名为：lession

写到这瞬间发现原来没有插入附件这项功能，本来还想上传上去这个数据库文件呢，好尴尬啊，不过没关系啦，博主是有百度云的人（瞬间逗比的本质又暴露了），已上传到http://pan.baidu.com/s/1mivSSRY    ，有兴趣来做这个实验的广大博友可以试一试，大神就勿喷了，博主是准大三的学生，嘿嘿。

使用json方式实现省市两级下拉级联菜单[原创]的更多相关文章

  1. 2016.8.22 Axure两级下拉框联动的实现

    刚学Axure,有些很简单的东西都要弄很久,但是弄出来的总归是很开心的. 参考来自:实现省市县下拉框的三级联动 http://www.woshipm.com/rp/348795.html/commen ...

  2. jquery下的提交，点击按钮没反应，post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  3. ASP.NET——两个下拉框来实现动态联动

    介绍: 在网页中.我们常常会遇到下图中的情况.首先在下拉框中选择所在的省.选择之后,第二个下拉框会自己主动载入出该省中的市.这样设计极大的方便了用户的查找.那这是怎样实现的呢? 1.建立数据库 &qu ...

  4. ASP.NET——实现两个下拉框动态联动

    引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...

  5. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  6. easy ui 下拉级联效果 ，下拉框绑定数据select控件

    html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...

  7. excel下拉级联的做法

    前面的文章讲了,excel下拉级联,重新选第一个下拉,后面那个值怎么清除.今天我讲下excel利用宏解决整个表格的级联下拉问题. 我遇到的情况是两个下垃圾连,第一个医生类别,第二个医生职称,而且我是要 ...

  8. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  9. Magento添加一个下拉登陆菜单Create Magento Dropdown Login in a few minutes

    Dropdown login forms are not a feature many online stores use, but in some cases they could be quite ...

随机推荐

  1. XMIND

    XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件,强调软件的可扩展.跨平台.稳定性和性能,致力于使用先进的软件技术帮助 ...

  2. Css基础-类选择器

    类选择器以一个.显示 <p class="pclass">这是第一个class</p> .pclass { color:red; } <div cla ...

  3. 08重编终极版《东邪西毒：终极版》DVD粤语中字

    1.东邪西毒].Ashes.of.Time.1994.384p.DVDRip.x264.ac3-DTMM.mkv 这个版本最清晰 ,可惜删减了,只有87分钟,粤语,1.4G. 2.东邪西毒(初始版). ...

  4. URL和DNS解析

    以下内容摘自<Go Web编程>,介绍的通俗易懂. 我们浏览网页都是通过URL访问的,那么URL到底是怎么样的呢? URL(Uniform Resource Locator)是“统一资源定 ...

  5. 【ALearning】第三章 Android基本常见控件

    本章主要介绍主要的寻常较多使用的控件,包含TextView.EditView.ImageView.Button等.本章将介绍相关控件基本属性的使用,为以后章节的进阶学习提供基础.案例中引用的Linea ...

  6. PHP加速器

    转http://www.vpser.net/opt/apc-eaccelerator-xcache.html 一.PHP加速器介绍         PHP加速器是一个为了提高PHP执行效率,从而缓存起 ...

  7. iOS 中的 block 是如何持有对象的

    Block 是 Objective-C 中笔者最喜欢的特性,它为 Objective-C 这门语言提供了强大的函数式编程能力,而最近苹果推出的很多新的 API 都已经开始原生的支持 block 语法, ...

  8. Bleed Brake Master Cylinder with Intelligent Tester IT2

    When the brake fluid level drops too low in the master cylinder reservoir, air bubbles can get caugh ...

  9. 深入理解计算机系统第二版习题解答CSAPP 2.14

    假设x和y的字节值分别为0x66和0x39.填写下表,指明各个C表达式的字节值. 0x66 = 0110 0110(B) 0x39 = 0011 1001(B) 表达式 值 x & y 0x2 ...

  10. Js解析json

    var sysModule=[];            var treeJson = <%=(sysModule) %>;            if (treeJson.length ...