ajax + php 省市区三级联动

效果图：

数据库表：

html代码

<tr><td colspan="2">
        <p class="short-input ue-clear">
        
            <label>所在地：</label>
            <select name="provinceid">
            <?php echo Ousuclass::all_html_option($pros,"id");?>
            </select>      
            <select name="cityid">
                <?php if(isset($cities)):?>
                <?php echo Ousuclass::all_html_option($cities,"id");?>
                <?php else:?>
                <option value="">请先选择所在省</option>
                <?php endif;?>
            </select>      
            <select name="countyid">
                <?php if(isset($counties)):?>
                <?php echo Ousuclass::all_html_option($counties,"id");?>
                <?php else:?>
                <option value="">请先选择所在地</option>
                <?php endif;?>
            </select>
            <span><em>*</em></span>
        </p>
        </td></tr>
        <tr>
            <td colspan="2">
                <p class="long-input ue-clear">

<label>通讯地址：</label>
                    <input type="text" name="companyaddress"/>
                </p>
            </td>
        </tr>

ajax代码

<?php if("create"==$url_method):?>
        $("input[name=companyname]").change(function () {
        $("input[name=username]").val($("input[name=companyname]").val());
         });
    $("select[name=provinceid]").val("330000"); //写死，默认省份为浙江省
    var url = "<?php echo "/".$url_module."/".$url_model?>/change/330000";
    $.ajax({
        type: "Post",
        url: url,
        data: {"id": "330000"},
        success: function (res) {
            var r = $.parseJSON(res);
            if (r.ret == 0) {
                var select = $("select[name=cityid]");
                select.empty();
                select.append("<option value=‘‘></option>");
                for (var i in r.obj) { //for...in 语句用于对数组或者对象的属性进行循环操作，for (变量 in 对象){}
                    select.append("<option value=‘" + r.obj[i].id + "‘>" + r.obj[i].name + "</option>");
                }
                $("select[name=cityid]").val("330300");//写死，默认城市为温州
                var url = "<?php echo "/".$url_module."/".$url_model?>/change/330300";
                $.ajax({
                    type: "Post",
                    url: url,
                    data: {"id": "330300"},
                    success: function (res) {
                        var r = $.parseJSON(res);
                        if (r.ret == 0) {
                            var select = $("select[name=countyid]");
                            select.empty();
                            select.append("<option value=‘‘></option>");
                            for (var i in r.obj) {
                                select.append("<option value=‘" + r.obj[i].id + "‘>" + r.obj[i].name + "</option>");
                            }
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            } else {
                alert(r.msg);
            }
        }
    });
    <?php endif;?>

function change() {
    $("select[name=provinceid]").change(function () {
        $("select[name=countyid]").empty();
        $("select[name=countyid]").append("<option value=‘‘>请先选择所在地</option>");
        var pid = $(this).val();
        var url = "<?php echo "/".$url_module."/".$url_model?>/change/" + pid;
        if ("" == pid)
            return;
        $.ajax({
            type: "Post",
            url: url,
            data: {"id": pid},
            success: function (res) {
                var r = $.parseJSON(res);
                if (r.ret == 0) {
                    var select = $("select[name=cityid]");
                    select.empty();
                    select.append("<option value=‘‘></option>");
                    for (var i in r.obj) {
                        select.append("<option value=‘" + r.obj[i].id + "‘>" + r.obj[i].name + "</option>");
                    }
                } else {
                    alert(r.msg);
                }
            }
        });
        //改变地址
        $("input[name=companyaddress]").val($(this).find("option:selected").text());  // $(this).find("option:selected").text();表示下拉框被选中的option标签的值
    });
    $("select[name=cityid]").change(function () {
        var pid = $(this).val();
        var url = "<?php echo "/".$url_module."/".$url_model?>/change/" + pid;
        if ("" == pid)
            return;
        $.ajax({
            type: "Post",
            url: url,
            data: {"id": pid},
            success: function (res) {
                var r = $.parseJSON(res);
                if (r.ret == 0) {
                    var select = $("select[name=countyid]");
                    select.empty();
                    select.append("<option value=‘‘></option>");
                    for (var i in r.obj) {
                        select.append("<option value=‘" + r.obj[i].id + "‘>" + r.obj[i].name + "</option>");
                    }
                } else {
                    alert(r.msg);
                }
            }
        });
        //改变地址
        $("input[name=companyaddress]").val($("select[name=provinceid]").find("option:selected").text() + " " + $(this).find("option:selected").text());
    });
    $("select[name=countyid]").change(function () {
        //改变地址
        $("input[name=companyaddress]").val($("select[name=provinceid]").find("option:selected").text() + " " + $("select[name=cityid]").find("option:selected").text() + " " + $(this).find("option:selected").text());
    });

php代码

<?php

protected function _getGlobalData($data){
        $data = parent::_getGlobalData($data);

//省
        $result = $this->mydb->find("select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where level = 1");  //dictxzqdms表名
        $data["pros"] = $result["obj"];
        if ($this->input->server(‘REQUEST_METHOD‘) == ‘GET‘&&("edit"==$this->url_method||"check"==$this->url_method)){
            if(isset($data[‘datalist‘])){
                if(isset($data[‘datalist‘][‘provinceid‘])){
                    $result = $this->mydb->find("select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where parentcode=‘".$data[‘datalist‘][‘provinceid‘]."‘");
                    $data["cities"] = $result["obj"];
                }
                if(isset($data[‘datalist‘][‘cityid‘])){
                    $result = $this->mydb->find("select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where parentcode=‘".$data[‘datalist‘][‘cityid‘]."‘");
                    $data["counties"] = $result["obj"];
                }
            }
        }
        return $data;    
    }

/*
     * 省市县级联
     */
    public function change($proid=""){
        if(""==$proid){
            $result["ret"] = 1;
            $result["msg"] = "no id";
            echo json_encode($result);
            exit;
        }
        $sql = "select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where parentcode=$proid";
        $re = $this->mydb->find($sql);
        $result["ret"] = 0;
        $result["obj"] = $re["obj"];
        echo json_encode($result);
    }

?>

时间： 2024-10-03 15:01:13

ajax + php 省市区三级联动的相关文章

第117天：Ajax实现省市区三级联动

Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建option,并将数据添加到option中 (4)定义点击事件,注意点击省调用的是city函数,点击市调用的是area函数 (5)注意获取市信息用的是省编码(pCode),获取区用的是市编码(cCode). 1.HTML代码 1 <!doctype html> 2 <html lang=&qu

基于thinkphp和ajax的省市区三级联动

练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2,建一个index.html <div> <label>所在地点</label> <select name="province_id" id="province_id" style="width:150px;"

基于ThinkPHP+AJAX的省市区三级联动

练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2,建一个index.html <div> <label>所在地点</label> <select name="province_id" id="province_id" style="width:150px;"

PHP+Ajax+JS省市区三级联动

     基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句.  index.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

【2017-6-7】AJAX异步刷新 省市区 三级联动

这里调用的是jquery1.7.1 需要数据库的支持 下面具体看代码 前面界面只需要三个下拉列表就OK <form id="form1" runat="server"> <div> <select id="st1"> <option value="null">加载中...</option> </select> <select id="st2

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博客讲解是按照两级联动,但下载的资源是三级联动含sql文件. 效果图: 首页核心代码: [html] view plain copy <% List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces(); pag

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

Ajax来实现下拉框省市区三级联动效果（服务端基于express）

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)