WSTMart在线客服
x
WSTMartQQ客服 QQ客服
服务热线

020-85289921

服务邮箱

wstmart@qq.com

WSTMart公众号二维码
新闻资讯
020-85289921
广州市天河北燕岭路燕侨大厦1708室

B2B2C商城系统 如何实现三级联动

发表于 2018-01-23 10:26:08     浏览:294

B2B2C商城系统 如何实现三级联动

  

     B2B2C商城系统开发的实际项目中,多级联动在很多地方会用到,比如:商品分类、地区下拉、数据筛选等, 而它项目中,需要怎样才能实现呢?

下面我们就以WSTMart开源多用户商城系统为例,介绍一下B2B2C商城系统是如何实现三级联动效果的。


地区数据的构造  

(1).B2B2C商城系统创建数据表

create table wst_areas(

areaId int unsigned auto_increment primary key comment '地区id',

areaName varchar(100) not null comment '地区名称',

parentId int unsigned not null default 0 comment '上级id'

)engine InnoDb charset=utf8;


(2).构造数据

INSERT INTO `wst_areas` VALUES('1','广东省','0'),('2','广州市','1'),('3','深圳市','1'),(null,'从化区','2'),(null,'天河区','2'),(null,'白云区','2'),(null,'海珠区','2'),(null,'荔湾区','2'),(null,'越秀区','2'),(null,'黄埔区','2'),(null,'番禺区','2'),(null,'花都区','2'),(null,'增城区','2'),(null,'南沙区','2'),(null,'福田区','3'),(null,'罗湖区','3'),(null,'南山区','3'),(null,'宝安区','3'),(null,'龙岗区','3'),(null,'盐田区','3');


接口实现

B2B2C商城系统创建areas模型


 

B2B2C商城系统创建areas控制器


 

htmljs)代码部分

实现思路

1.页面加载完毕时,请求省级数据

2.改变的时候,请求该省下的市级数据,并且清空原有市、县数据并设置为请选择

3.改变的时候,请求该市下的县级数据,并且清空原有县数据并设置为请选择


<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>三级联动</title>

        <script type='text/javascript' src='./jquery-1.11.1.min'></script>

</head>

<body>

        <label>省:

                 <select id="pro" onChange="changePro()">

                         <option value="0">请选择</option>

                 </select>

        </label>

        <label>市:

                 <select id="city" onChange="changeCity()">

                         <option value="0">请选择</option>

                 </select>

        </label>

        <label>县:

                 <select id="area">

                         <option value="0">请选择</option>

                 </select>

        </label>

</body>

</html>

<script>

        var api = 'http://localhost/wstmartp/home/areas/pagequery';

        $(function(){

                 // 页面加载完毕,请求省级数据

                 $.post(api,{parentId:0},function(data){

                         if(data.status==1){

                                  var proData = data.data;

                                  var html = [];

                                  html.push('<option value="0">请选择</option>');

                                  for(var i=0;i<proData.length;++i){

                                          var _this = proData[i];

                                          html.push('<option value="'+_this.areaId+'">'+_this.areaName+'</option>')

                                  }

                                  $('#pro').html(html.join());

                         }else{

                                  alert('没有地区数据');

                         }

                 })

        })

        // B2B2C商城系统切换省级时触发

        var changePro = function(){

                 // B2B2C商城系统将市级、县级设置为请选择

                 $('#city').html('<option value="0">请选择</option>');

                 $('#area').html('<option value="0">请选择</option>');

                 // B2B2C商城系统请求接口设置市选择

                 var proId = $('#pro').val();

                 if(proId==0)return;

                 $.post(api,{parentId:proId},function(city){

                         if(city.status==1){

                                  var cityData = city.data;

                                  var html = [];

                                  html.push('<option value="0">请选择</option>');

                                  for(var i=0;i<cityData.length;++i){

                                          var _this = cityData[i];

                                          html.push('<option value="'+_this.areaId+'">'+_this.areaName+'</option>')

                                  }

                                  $('#city').html(html.join());

                         }else{

                                  alert('没有地区数据');

                         }

                 })

        }

        // B2B2C商城系统切换市级时触发

        var changeCity = function(){

                 // 将县级设置为请选择

                 $('#area').html('<option value="0">请选择2</option>');

                 // 请求接口设置市选择

                 var cityId = $('#city').val();

                 if(cityId==0)return;

                 $.post(api,{parentId:cityId},function(area){

                         if(area.status==1){

                                 var areaData = area.data;

                                  var html = [];

                                  html.push('<option value="0">请选择</option>');

                                  for(var i=0;i<areaData.length;++i){

                                          var _this = areaData[i];

                                          html.push('<option value="'+_this.areaId+'">'+_this.areaName+'</option>')

                                  }

                                  $('#area').html(html.join());

                         }else{

                                  alert('没有地区数据');

                         }

                 })

        }

</script>