午夜成人无码福利免费视频,我的妹妹,天天夜碰日日摸日日澡性色av ,无码人妻精品一区二区三区下载,双乳被老汉揉搓a毛片免费观看

掃描二維碼

添加客服咨詢詳情

添加微信立即咨詢

咨詢熱線：15918671994

—— 專業(yè)電商系統及解決方案提供服務商 ——

多用戶
商城系統

訂單
管理系統

訂貨
管理系統

多語言
商城系統

B2B2C商城系統 如何實現三級聯動

發(fā)表于 2018-01-23 10:26:08   瀏覽：2675

B2B2C商城系統 如何實現三級聯動

  

     B2B2C商城系統開發(fā)的實際項目中，多級聯動在很多地方會用到，比如：商品分類、地區(qū)下拉、數據篩選等， 而它項目中，需要怎樣才能實現呢？

下面我們就以WSTMart開源多用戶商城系統為例，介紹一下多店商城系統是如何實現三級聯動效果的。


地區(qū)數據的構造  

(1).B2B2C商城系統創(chuàng)建數據表

create table wst_areas(

areaId int unsigned auto_increment primary key comment '地區(qū)id',

areaName varchar(100) not null comment '地區(qū)名稱',

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,'從化區(qū)','2'),(null,'天河區(qū)','2'),(null,'白云區(qū)','2'),(null,'海珠區(qū)','2'),(null,'荔灣區(qū)','2'),(null,'越秀區(qū)','2'),(null,'黃埔區(qū)','2'),(null,'番禺區(qū)','2'),(null,'花都區(qū)','2'),(null,'增城區(qū)','2'),(null,'南沙區(qū)','2'),(null,'福田區(qū)','3'),(null,'羅湖區(qū)','3'),(null,'南山區(qū)','3'),(null,'寶安區(qū)','3'),(null,'龍崗區(qū)','3'),(null,'鹽田區(qū)','3');


接口實現

B2B2C商城系統創(chuàng)建areas模型


 

B2B2C商城系統創(chuàng)建areas控制器


 

html（js）代碼部分

實現思路

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>?。?/span>

                 <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('沒有地區(qū)數據');

                         }

                 })

        })

        // B2B2C商城系統切換省級時觸發(fā)

        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('沒有地區(qū)數據');

                         }

                 })

        }

        // B2B2C商城系統切換市級時觸發(fā)

        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('沒有地區(qū)數據');

                         }

                 })

        }

</script>

商淘云公眾號