基於jQuery JSON的省市聯動效果

2021-09-07 17:47:12 字數 1003 閱讀 5152

省市區聯動下拉效果在web應用中使用非常廣泛,尤其在一些會員資訊系統、電商**最為常見,開發者一般使用ajax實現無重新整理下拉聯動。

本文將講述利用jquery外掛程式,通過讀取json資料,實現無重新整理動態下拉省市二(三)級聯動效果。

html

首先在head中載入jquery庫和cityselect外掛程式。

接下來,我們在#city中,放置三個select,並且三個select分別設定class屬性為:prov、city、dist,分別表示省、市、區(縣)三個下拉框。

如果只想實現省市二級聯動,則去掉第三個dist的select即可。

注意:這三個class的名稱不能隨便修改。

jquery

呼叫cityselect外掛程式非常簡單,直接呼叫:

$(function());

自定義引數呼叫,設定預設省市區。

$("#city").cityselect();

當然,你還可以擴充套件,自定義下拉列表選項資料,注意資料格式一定要為json格式。

$("#city").cityselect(,,]}, 

]},

,,,]},

,,]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

});

可以利用php等後台語言將資料庫中的資料轉換成json格式,然後使用url引數指向後台位址就能實現無重新整理聯動效果。

$("#city").cityselect();

Json 基於jQuery JSON的省市聯動效果

json ajax 省市聯動 省市區聯動下拉效果在web中應用非常廣泛,尤其在一些會員資訊系統 電商 最為常見。開發者一般使用ajax實現無重新整理下拉聯動。本文將講述,利用jquery外掛程式,通過讀取json資料,實現無重新整理動態下拉省市二 三 級聯動效果。檢視演示 html 首先在head中...

TreeView的省市選擇

一 父選擇視窗 二 子視窗提供選擇frmselectareas 1 資料準備 在資料庫中有一張表areas欄位為 aid,aname,apid aid為字段地區編號,aname為地區名稱,apid為地區父級aid.2 frmselectareas窗體中,遞迴遍歷繫結資料 view code 1 vo...

動態的省市級聯

aligins none block 所屬地區 請選擇 請選擇 請選擇 請選擇 請選擇 先查一級 public listfindonearea long parentid 再查二級 public listfindchildsarea long id 實體類 private static final ...