約定
- 省市區**城市聯動效果,選擇框預設全部顯示,選擇後根據實際情況顯示或隱藏。
- 在省得select上加上屬性 load-data=「330102」 即表示頁面需把330102這個對應的相關select做相應選中。
- json資料結構:城市編碼6位(每2位表示一級),城市層級,上一級編碼,城市名稱,其他根據業務實際需求而定
效果
dom結構:
class="form-group"
id="addrs">
for=""
class="col-sm-3 text-right">位址
class="col-sm-3">
id="province"
class="addr form-control" load-data="210104">
"">--選擇省/市--
div>
class="col-sm-3">
id="city"
class="form-control">
"">--選擇城市--
div>
class="col-sm-3">
id="district"
class="form-control">
"">--選擇區域--
div>
div>
code:
class="show" type="text"
name="address"
id="address" />
js:
$(function
() });
$.when(getjson).done(function
(data) );
}; //設定城市
var setarea = function
() });
$.when(getjson).done(function
(data) else
getdist("two");
});}; //設定區域
var getdist = function
(sign) else
if(sign == "two") else
if(s2 == "")
if(s3 == "" && s2 !== "")
}; //獲取城市編碼
var load_city = function
() else
if(getcity[j].level == 2 && getcity[j].parent_code == s1)
}city_obj.val(s2); //獲取2級城市目錄並賦值
if(ldata.substr(4, 6) != "00") }}
}}
var init = function
() });
prov_obj.bind("change", function
() );
city_obj.bind("change", function
() );
district_obj.bind("change", function
() );
};//載入json資料
$.getjson('', function
(data) );
})
js 多級聯動(省 市 區)
方式一 資料從資料庫獲取,ajax實現區域性重新整理 方式二 資料從json檔案獲取,ajax實現區域性重新整理 以方式二為例,進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...
js 多級聯動(省 市 區)
方式一 資料從資料庫獲取,ajax實現區域性重新整理 方式二 資料從json檔案獲取,ajax實現區域性重新整理 以方式二為例,進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...
js 多級聯動(省 市 區)
方式一 資料從資料庫獲取,ajax實現區域性重新整理 方式二 資料從json檔案獲取,ajax實現區域性重新整理 以方式二為例,進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...