也談js操作二級聯動

2021-06-16 04:50:13 字數 1526 閱讀 6655

網上二級(多級)聯動的例子也不少,有各種不同的操作方法。

我所採用的方法網上也應該有的,不過我還沒有看到過。

希望發布到首頁能有它的價值所在。好了,開始吧

表結構二級或多級聯動主要是以資料庫中具有父編號的表為基礎,這個也不例外

id,parent_id,name 三列。

採用js操作

先說下資料在js中的儲存方式。

主要用二維陣列來儲存資料。結構如下:

a[父編號]=[[子編號1,子名稱1],[子編號2,子名稱2],[子編號3,子名稱3],……];

首先用父編號獲取所有的子資料,在把子資料的編號及名稱繫結在dropdown中

第一步 二級聯動資料(後面說這些資料怎麼得到)

var cities

=new

array();

cities[

'00000000-0000-0000-0000-000000000000']

=[['028db215-8bd7-45ab-bbaa-1efa175c35ca',

'長春'],[

'bcb32195-2a46-4cd1-9472-6383e8fa55cc',

'瀋陽']];

var schools

=new

array();

schools[

'028db215-8bd7-45ab-bbaa-1efa175c35ca']

=[['5f22403a-7a59-4b7f-b62d-9451298cbd00',

'長春1

'],[

'e8f0f665-9a9a-4c44-83fd-598e8a28dcd7',

'長春2

']];

schools[

'bcb32195-2a46-4cd1-9472-6383e8fa55cc']

=[['4a743dbf-1fdc-4907-a44e-8d169d715664',

'瀋陽1

']];

第一級為城市資料,第二級為學校資料。

第二步 設定資料在dropdown中顯示 

//根據父編號獲取相應的子資料,並顯示在obj控制項中

//type=0 城市,1學校

//pid 父編號

//obj 要顯示資料的dropdown

function setregions(type,pid,obj)

else

if(type==1

) if

(temparray

!=null)}

$(obj).html(text);}

第三步 城市改變的時候 選擇學校資料

//用城市編號設定學校子資料

function citychanged()

第四步 當然在修改的時候需要進行初始化,這也是以前我最頭疼的問題

//初始化 城市 學校值

//cityid 城市編號

//schoolid 學校編號

function initregions(cityid,schoolid)}

二級聯動 js

在html部分只寫兩個select標籤 option標籤將用js的方法寫入 onchange 內容發生改變事件 用於select下拉列表中後的內容發生改變時候的觸發 核心部分就是js裡面的內容 建立乙個物件data來儲存資料 data 首先通過for迴圈來新增第一級裡面的內容 province va...

JS控制二級聯動

在註冊頁面上有乙個下拉列表,下拉列表顯示省份資訊,有另乙個下列列表.選擇某個省份,將這個省份下的城市列出。陣列 步驟一 確定事件 onchange.步驟二 獲得改變的省份值 步驟三 比較省份的值 與 陣列中定義的值是否相等,如果相等獲得這個省份對應的所有的市的陣列.步驟四 建立option元素,將陣...

js 省市二級聯動

bootstrap jquery 省市二級聯動 html panel panel default panel body h2 id selectprovince province1 遼寧省 option province2 selected 吉林省 option province3 黑龍江省 opt...