使用json方式实现省市两级下拉级联菜单[原创]

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

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

当然,要完成这个实验,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    ,有兴趣来做这个实验的广大博友可以试一试,大神就勿喷了,博主是准大三的学生,嘿嘿。

时间: 2024-10-12 21:43:15

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

实现两级下拉框的联动

1.实现两级下拉框的联动. 功能:实现点击年级下拉框,加载对应科目的下拉框. 第一步:首先要加载年级下拉框中的数据. 01.在GradeDAL层(数据访问层)写一个方法,查询所有年级的信息. /// <summary> /// 从数据库中获取年级信息 /// </summary> /// <returns>List的集合:年级编号,年级名称</returns> public List<Grade> SelectGradeInfo() { List

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

刚学Axure,有些很简单的东西都要弄很久,但是弄出来的总归是很开心的. 参考来自:实现省市县下拉框的三级联动 http://www.woshipm.com/rp/348795.html/comment-page-1 我的实现: 1.添加两个droplist,并且为之命名:province和city. 2.为province添加两个选项. 3.将city转换为dynamic panel. 右击city,选择选项“convert to dynamic panel”. 4.为city添加两个状态(与

Adnroid 两种下拉刷新 方式的实现 sina刷新 gmail刷新

sina刷新 这种下拉刷新的方式是比较简单的.上个图: 这种刷新方式的思路是这样的: 首先是需要一个HeaderVIew也就是刷新时头部所显示出来的数据.这个view的布局随你,长啥样自己定夺. 其他不是特别重要,重要的是用户触摸事件的捕捉,看到github上的大神的一些方法是比较正规的,我就自己用自己的方法尝试,主要是捕捉到用户的点击事件来计算用户所触摸到的位置然后来更新头部布局的位置. 这个重要的代码贴出来: case MotionEvent.ACTION_MOVE: currentY =

简单的单级下拉菜单实现

效果预览 这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单. 基本思路 在菜单处于光标之下时显示菜单,其余时候隐藏.这个过程首先得想到 :hover 伪类来实现,但是直接的利用伪类还不行,因为普通状态下菜单隐藏了,没办法触发 :hover ,不过下拉菜单隐藏了不是还有菜单标题么,菜单标题处于光标之下时显示菜单就能够显示出来了,但是鼠标移到菜单上的时候下拉菜单又会消失,这个时候想到给下拉菜单也加上 :hover 显示自身,但是万一脑洞大开,要做分体菜单怎么办,这个时候把它放

两个下拉框的纠葛

1.说明:后台传来两个list(datelist/weeklist)分别要放入两个下拉框,而且两个list的值一一对应,即datelist.get(i)与weeklist.get(i)值相等,要达到的效果是---->若选中第一个下拉框的值(假设值的索引为index),第二个下拉框的值必须也显示索引为index的option,反之亦然. 2.想法:由于考虑了第二个下拉框虽可以对应显示,但是显示之后,无论是恶意还是非恶意用户,都可能会对第二个下拉框重新进行选择,所以想着选中一个下拉框,第二个下拉框对

excel两个下拉框相互关联

我有两列数据,录入了所有人的信息,一个是姓名,一个是编号 现在我想再做两个下拉框,一个是选择姓名的,一个是选择编号的,我希望我选择姓名后,编号自动对应到这个人的,如果我选择编号,那么姓名也自动对应过来.请教各位excel的达人们. 这个用VLOOKUP函数做更方便 假设是在A列写入了姓名,B列写入了编号 在C2单元格设置了下拉菜单可以选择姓名, 则在D2单元格写入公式 =VLOOKUP(C2,A:B,2,) 原文 http://zhidao.baidu.com/question/14945914

JS横向延时2级下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS横向延时2级下拉菜单</title> <style> body{ font-size: 12px; color: #333;} body, ul,h2{ margin:0;padding:0;} li { list-style:none;}

学习笔记-php简单联级下拉菜单输出-2016.4.7

在使用联级输出的时候一到一个模型里面的小问题,之前不注意,模型里不同的方法每次得到的数据交给控制器的时候,我都以数组的形式输出,但是这个数组我作为私有字段,到时今天做联级菜单输出的时候,不能正常输出,最后不得不吧这个私有字段去掉,在每个方法的作用域里面分别初始化一个数组,这样就互不干扰!(还是考虑的太少,太异想天开!) 不说了,贴代码 html部分 <select name="nav"> <option>请选择一个栏目类别</option> {$na

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

引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 "省"表 "市"表 2.添加控件 3.两个下拉框分别绑定数据源 protected void Page_Load(object sender, EventArgs e) { //判断是否第一次进入页面,如果是,则绑定数据库:如果不是,则无需绑定. if (!this.IsPost