• 【ajax+php】动态展示4级单位(省、市、县、镇)


    1、本篇教程以ajax+php动态展示【省、市、县、镇】四级地区单位

    2、效果图:     

    3、不废话,贴代码!

    HTML:

              <div class="form-group">
                <label class="col-sm-3 control-label" for="onecity"> 
                    地区分类
                    <span class="text-danger">*</span>
                </label>
                <div class="col-sm-2">
                    <select class="form-control"  id="onecity" name="onecity" onchange="city()">
                        <option value="">请选择一级地区</option>
                        {loop $one $v}
                        <option value="{$v['id']}">{$v['name']}</option>
                        {/loop}
                    </select>
                </div>
                <!-- 二级城市 -->
                <div class="col-sm-2" id="ss">
                </div>
                <!-- 三级城市 -->
                <div class="col-sm-2" id="ss2">
                </div>
                <div class="col-sm-2" id="ss3">
                        </div>
                <script text="text/javascript">
                            function city(){
                                 var one=$("#onecity").val();
                                 $.ajax({
                                       type: "POST",
                                       url: "/index.php?do=pubh***_third&id=19&step=step1_third&fc=1&one="+one,
                                       success: function(msg){
                                           $("#ss").empty();
                                           $("#ss").append(msg);
                                       }
                                    });    
                            }
                        </script>
                        <script text="text/javascript">
                            function city2(){
                                 var two=$("#twocity").val();
                                 $.ajax({
                                       type: "POST",
                                       url: "/index.php?do=pubh***_third&id=19&step=step1_third&fc=2&two="+two,
                                       success: function(msg){
                                           $("#ss2").empty();
                                           $("#ss2").append(msg);
                                       }
                                    });    
                            }
                        </script>
                        <script text="text/javascript">
                    function city3(){
                         var three=$("#threecity").val();
                         $.ajax({
                               type: "POST",
                               dataType: 'json',
                               url: "/index.php?do=pubh***_third&id=19&step=step1_third&fc=3&three="+three,
                               success: function(res){
                                       $("#ss3").empty();
                                 if(res.data!='error'){
                                       $("#ss3").append(res.data);
                                 }
                               }
                            });    
                    }
                </script>
            </div>

    php:

            //1、首先将省级单位给输出到页面 -- 1225
            $one=db_factory::get_table_data("*",'w***_district','upid=0');
            
            //2、ajax动态判断传过来的pid(省),获取市级单位,并动态输出<select><option>数据html
            if($_R[fc]==1){
                if($_R['one']){
                    $msg=db_factory::get_table_data("*","w***_district","upid=".$_R['one']);
                }
                $dis='<select class="form-control" name="twocity"  id="twocity" onchange="city2();choose_village();"><option value="">请选择二级地区</option>';
                foreach($msg as $v){
                    $dis.='<option  value="'.$v[id].'">'.$v[name].'</option>';
                }
                $dis.='</select>';
                echo $dis;
                die;
            }
            if($_R[fc]==2){
                if($_R['two']){
                    $msg=db_factory::get_table_data("*","w***_district","upid=".$_R['two']);
                }
                $dis='<select class="form-control" name="threecity" id="threecity" onchange="city3();"><option value="">请选择三级地区</option>';
                foreach($msg as $v){
                    $dis.='<option value="'.$v[id].'">'.$v[name].'</option>';
                }
                $dis.='</select>';
                echo $dis;
                die;
            }
            if($_R[fc]==3){
                if($_R['three']){
                    $msg=db_factory::get_table_data("*","wi***_district","upid=".$_R['three']);
                }
                /* 四级单位有可能没有的,比如直辖市、自治州 */
                if($msg){
                    $dis='<select class="form-control" name="fourcity"  id="fourcity" ><option value="">请选择四级地区</option>';
                    foreach($msg as $v){
                        $dis.='<option value="'.$v[id].'">'.$v[name].'</option>';
                    }
                    $dis.='</select>';
                    kekezu::echojson("",1,$dis);
                    //echo $dis;
                    die;
                }
                else{
                    kekezu::echojson("",2,'error');//参数依次msg、status、data
                    die ();
                }
            }

    到这里就结束了,很简答的一个ajax应用。

  • 相关阅读:
    动态更新活动条件
    使用本地服务异步执行自定义活动业务逻辑
    隐藏自定义复合活动的内部实现
    如何开发一个基本的复合活动
    HTML5性能之争 —— 单线程:缺点还是特点?
    CDNJS —— Web 上最快的 JavaScript 资源库
    Comfusion 4.1 发布,桌面 Linux 发行
    FreeBSD 9.1 正式版已经可以下载
    Squid Analyzer 5.0 发布,Squid日志统计
    MemSQL 1.8 发布,号称最快的关系数据库
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/8116771.html
Copyright © 2020-2023  润新知