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

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

当然，要完成这个实验，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. js 如何把JSON格式的字符串转换为JSON对象

    直接用eval函数.例:var str1 = '{ "url": "www.51qdq.com", "name": "js&quo ...

  2. 【转】通过CMD命令设置定时关机及ShutDown命令大全

    经常会遇到这种情况:现在有个事情要离开很长时间,到那还在下载一个东西仅差10分钟就完成了,或者杀毒之类,不想让电脑一直开着也不想现在就停止工作.这是就会用到定时关机. 电脑系统设置(CMD命令)智能关 ...

  3. U-BOOT 移植到友善之臂mini2440

    U-BOOT 移植到友善之臂mini2440 开发环境:ubuntu 10.10 编译器:友善之臂mini2440光盘自带arm-linux-gcc 4.4.3 一. 在denx官网下载源码,我所用版 ...

  4. iOS开发——UI篇&提示效果

    提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...

  5. android132 360 05 手机定位

    .网络定位:根据ip地址定位,根据ip地址在实际地址数据库中查询实际地址. 缺点:动态ip导致地址不准确. .基站定位:3个基站就可以确定实际位置,定位范围是几百米到几公里不等. .GPS定位:美国卫 ...

  6. JS ||与&&总结

    ||  从左到右 只要有一个为真 则返回那个真值:如果尤为假则返回最后一个假值 && 从左到右 只要有一个为假 则返回那个假值:如果都为真则返回最后一个真值

  7. Android_SystemService

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  8. Android_Menu_contextMenu

    xml文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  9. mysql：错误日志log_error:

    1.启动错误日志: 在不同的情况下,错误日志会记录在不同的位置,如果没有配置文件指定文件名,则默认为hostname.err 在mysql5.6的RPM发布的方式中,错误日志被放在/var/log/m ...

  10. Linux下Openssl的安装全过程

    第一章 1.下载地址:http://www.openssl.org/source/ 下一个新版本的OpenSSL,我下的版本是:openssl-1.0.0e.tar.gz 可以通过#wget http ...