省市区三级异步联动

最新推荐文章于 2021-01-05 11:16:56 发布

walkersc

最新推荐文章于 2021-01-05 11:16:56 发布

阅读量553

点赞数

分类专栏： jQuery PHP

本文链接：https://blog.csdn.net/u013160024/article/details/38811031

版权

PHP 同时被 2 个专栏收录

142 篇文章 0 订阅

订阅专栏

jQuery

20 篇文章 0 订阅

订阅专栏

HTML代码
<html>
 <head></head>
 <body>
  网点区域  
  <span style="padding-left:15px;">省份</span> 
  <label for="select"></label> 
  <select class="Provinces" name="province" id="select" style="width:150px;"> <option selected="selected" value="">载入中...</option> </select> 
  <span style="padding-left:15px;">城市</span> 
  <label for="select"></label> 
  <select class="City" name="city" id="select" style="width:150px;"> <option selected="selected" value="">请选择</option> </select> 
  <span style="padding-left:15px;">地区</span> 
  <label for="select"></label> 
  <select class="Region" name="county" id="select" style="width:150px;"> <option selected="selected" value="">请选择</option> </select>  
 </body>
</html>

juqery代码
<script type="text/javascript">
$(document).ready(
    function()
    {   
        //载入省份
        $.get("__APP__/Admin/Network/check?type=Provinces&id=0", 
          function(data){
            $('.Provinces').html(data);
          }
        )
            

    }
);

$('.Provinces').change(
    function()
    {  
        $.get("__APP__/Admin/Network/check?type=City&id="+$('.Provinces').val(), 
          function(data){
            $('.City').html(data);
          }
        )
            

    }
);



$('.City').change(
    function()
    {  
        $.get("__APP__/Admin/Network/check?type=Region&id="+$('.City').val(), 
       // var cityval = $('.City').val();
       //$.get("__APP__/Admin/Network/check",{type:Region,id:cityval}, 
          function(data){
            $('.Region').html(data);
          }
        )
            

    }
);

//也可以换成load方法来加载
//例如最后一个可以这样写
//$('.City').change(function(){
//    $('.Region').load("__APP__/Admin/Network/check?type=Region&id="+$('.City').val());
//});
//load方法参考:<a target=_blank href="http://www.w3school.com.cn/jquery/ajax_load.asp">http://www.w3school.com.cn/jquery/ajax_load.asp</a>

 </script>

PHP代码
//联动查询数据添加/编辑
	public function check()
	{
		$id = $_GET['id'];
		if (is_numeric($id))
		{
		    $type = $_GET['type'];
			$Ajax_list = '';
			
			$Region = M('region');             // 连接数据表
			
			if ($type == 'Provinces')          // 省份列表
			{
			   $Ajax_list = $Region->where(array('actid'=>0))->select();
			}
			else if ($type == 'City')          // 城市列表
			{
			    $Ajax_list = $Region->where(array('actid'=>$id))->select(); 
			}
			else if ($type == 'Region')        // 地区列表
			{

			    $Ajax_list = $Region->where(array('actid'=>$id))->select(); 
				
				if ( count($Ajax_list) == 0)   // 如果地区信息不存在,载入上级城市名以填充
				{
				    $Ajax_list = $Region->where(array('actid'=>$id))->select(); 
				}
			}
			$this->assign("Ajax_list",$Ajax_list);
			$this->display();
		}
	}

对应的check.html模板代码
<option select="selected" value="">请选择</option>
<volist name="Ajax_list" id="vo">
    <option value="{$vo.id}">{$vo.name}</option>
</volist>