zoukankan      html  css  js  c++  java
  • 地区的联动

    PHP页面:

    //二级联动

    public function diqu_show()
    {
    $data=Db::table("area")->where("parent_id=0")->select();
    //var_dump($data);die;
    $aa=$data[0]['id']+100;
    $shi_data=Db::table("area")->where("parent_id='$aa'")->select();
    // var_dump($shi_data);die;
    $arr=['data'=>$data,'shi_data'=>$shi_data];
    return view("diqu_show",['arr'=>$arr]);
    }
    //市级
    public function shi_show()
    {
    $parent_id=Request::instance()->param("parent_id");
    $shi_data=Db::table("area")->where("parent_id='$parent_id'")->select();
    return view("diqu_show2",['shi_data'=>$shi_data]);
    }
    //省级
    public function shiji_show()
    {
    $shi=Request::instance()->param("shi");
    $shi=Db::table("area")->where("parent_id='$shi'")->select();
    return view("diqu_show3",['shi'=>$shi]);
    }
    HTML页面:
    diqu_show.html页面:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <center>
    <table>
    <tr>
    <td>
    省区:
    <select name="" id="" class="sheng">
    <option value="">请选择</option>
    {volist name="arr.data" id="v"}
    <option value="{$v.id}">{$v.name}</option>
    {/volist}
    </select>
    </td>
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;市级:
    <select name="" id="" class="shi">
    <option value="">请选择</option>
    </select>
    </td>
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;县/区:
    <select name="" id="" class="xian">
    <option value="">请选择</option>
    </select>
    </td>
    </tr>
    </table>
    </center>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script>
    $(function () {
    $(document).on("change",".sheng",function () {
    // var sheng=$("select option:selected").val();
    var sheng=$(this).val();
    //请求
    $.get(
    "{:url('index/shi_show')}?parent_id="+sheng,
    function (data) {
    $(".shi").html(data)
    }
    )
    })

    $(document).on("change",".shi",function () {
    // var sheng=$("select option:selected").val();
    var shi=$(this).val();
    //请求
    $.get(
    "{:url('index/shiji_show')}?shi="+shi,
    function (data) {
    $(".xian").html(data)
    }
    )
    })

    })
    </script>
    </body>
    </html>
    diqu_show2.html页面
    <option value="">请选择</option>
    {volist name="shi_data" id="v"}
    <option value="{$v.id}">{$v.name}</option>
    {/volist}
    diqu_show3.html页面
    <option value="">请选择</option>
    {volist name="shi" id="v"}
    <option value="{$v.id}">{$v.name}</option>
    {/volist}
     
    你所浪费的今天是那些死去的人所奢望的明天,你所厌恶的现在是未来的你所回不去的曾经。
  • 相关阅读:
    C面试复习笔记
    Java面试复习笔记
    Jdk1.6 HTTPS访问问题解决办法
    百度地图轨迹回放,自定义路书,边走边画线
    简单的代码生成小工具(支持模板)
    card布局解决复杂操作的布局问题
    tabpanel如何隐藏页签表头以及基本用法总结
    ExtJS4.2下将表单元素放在菜单时不能进行拷贝的问题解决办法
    照片元数据信息以及在照片中写入gps信息
    带名称空间的xml数据查询
  • 原文地址:https://www.cnblogs.com/stj123/p/9787462.html
Copyright © 2011-2022 走看看