省市區城市級聯

2021-07-27 06:28:30 字數 1735 閱讀 6633

約定

- 省市區**城市聯動效果,選擇框預設全部顯示,選擇後根據實際情況顯示或隱藏。

- 在省得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標籤 ...