地区三级联动

控制层:

<?phpnamespace app\index\controller;

use think\Controller;use think\Db;

class Addr extends Controller{    public function addr(){        $one = Db::name(‘global_region‘) -> where([‘parent_id‘ => 0]) -> select();        return view(‘addr‘,[‘one‘=>$one]);    }

public function two(){        $region_id = input(‘region_id‘);        $two = Db::name(‘global_region‘) -> where([‘parent_id‘ => $region_id]) -> select();        echo json_encode($two);    }}

视图层:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><center>    <form id="form">        <table>            <tr>                <td width="150">                    国家:<select id="one">                        <option value="--请选择--">--请选择--</option>                    {volist name="one" id="vo"}                    <option value="{$vo.region_id}">{$vo.region_name}</option>                    {/volist}                    </select>                </td>                <td width="150">                    省份:<select id="two">                        <option value="--请选择--">--请选择--</option>

</select>                </td>                <td width="200">                    区域、乡、镇:<select id="three">                    <option value="--请选择--">--请选择--</option>

</select>            </td>            </tr>        </table>    </form></center></body></html><script src="__STATIC__/jquery-3.3.1.min.js"></script><script>    $(‘#one‘).change(function(){        var region_id = $(this).val();        $.ajax({            url:"{:url(‘addr/two‘)}",            data:{region_id:region_id},            method:"post"        }).done(function(msg){            var res = JSON.parse(msg);            console.log(msg);            var str = "";            $.each(res,function (k,v) {                str += "<option value=‘"+v.region_id+"‘>"+v.region_name+"</option>";            });            $(‘#two‘).append(str);        })    });    $(‘#two‘).change(function(){        var region_id = $(this).val();        $.ajax({            url:"{:url(‘addr/two‘)}",            data:{region_id:region_id},            method:"post"        }).done(function(msg){            var res = JSON.parse(msg);            // console.log(msg);            var str = "";            $.each(res,function (k,v) {                str += "<option value=‘"+v.region_id+"‘>"+v.region_name+"</option>";            });            $(‘#three‘).append(str);        })    })</script>

原文地址:https://www.cnblogs.com/wanglongfei/p/9806773.html

时间: 2024-07-29 20:12:44

地区三级联动的相关文章

地区三级联动--省份province

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地区三级联动</title> <script src="./jquery.js"></script> </head> <body> <h2>地区三级联动</h2> 省

中国地区三级联动菜单(纯js制作)

第一步:在网页中写入如下代码: <!DOCTYPE html> <!--次行代表使用的是html5,如果不支持请换成html4--> <html> <head> <title>三级联动菜单</title><br> <script src="style/jsAddress.js"></script> <!--需要和js文件在同一目录下--> </head>

使用pull解析和spinner实现省市地区三级联动的效果

xml资源文件 <?xml version="1.0" encoding="UTF-8"?> <!-- START_DOCUMET:第一个节点 END_DOCUMET:尾节点 START_TAG:其他的首部的节点 p pn c cn... END_TAG:其他的尾部的节点 </p> </c> ... --> <citylist> <p p_id="01"> <pn>

省份地区三级联动的简单实现

在此直接导入代码,详细内容代码中有注释,相应需要引入的文件大家可以自己到相应网站下载: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--省份--> <select id="province" name="provinc

省份,城市,地区------三级联动菜单

模板部分代码: <form method='post' action='' id='myform' name='myform'> <dl><dt>地址</dt> <dd> <select name='prov' id='prov'> <option value=''>省份</option> <?php $prov=M('')->where($where)->order('order')->

地区三级联动实现方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

(转)JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动

JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动 原文链接:http://heisetoufa.iteye.com/blog/353974 比较好的二级联动: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE>

全国地区选择(三级联动)

1.新建HTML文件,引入必须的js文件. <script src="../js/jquery.min.js"></script> //自行引入 <script src="../js/Area.js"></script> <script src="../js/AreaData_min.js"></script> Area.js: 1 // 地址选择三级联动 2 $(funct

地区选择-三级联动

1. city_pickers: ^0.0.1 import 'package:city_pickers/city_pickers.dart'; 2. class TabsPage extends StatefulWidget{ @override _TabsPageState createState() => new _TabsPageState(); } class _TabsPageState extends State<TabsPage> with SingleTickerPro