react寫城市(省市區)聯動

2021-08-08 21:48:21 字數 1757 閱讀 7301

在components中引入聯動的json檔案

import provincedata from

'../../../../../json/area.json';

在this.state中定義相應變數

constructor(props),

zoom: 3

},curoption: ,

//聯動省級市資料

deepprovince:null,

deepcity:null

};this.changetab = this.changetab.bind(this);

this.chgactive = this.chgactive.bind(this);

this.chgoption = this.chgoption.bind(this);

寫聯動的方法

//drop 改變active

chgactive(key) );

}//drop 改變option

chgoption(key, value) ;

obj[key] = value;

obj = object.assign({}, this.state.curoption, obj);

this.setstate();

if(key === 'province'))

}else

if(key === 'city'))

}}

在render中宣告變數以及呼叫和判斷

let  = this.state

; let provincedropdata =,citydropdata=,countydropdata =;

provincedata.provincedata

.map(

function(i))}}

);if(deepprovince))

}});

}if(deepcity))

}});

}

寫相應的頁面顯示

classname="drop_city">

classname="country"

propkey="province"

placeholder=

curactive=

curoption=

chgoption=

chgactive=

nodefault=

dropdata=>

droplist>

span>

classname="drop_city">

propkey="city"

placeholder=

curactive=

curoption=

chgoption=

chgactive=

nodefault=

dropdata=>

droplist>

span>

classname="drop_city">

propkey="county"

placeholder=

curactive=

curoption=

chgoption=

chgactive=

nodefault=

dropdata=>

droplist>

span>

省市區聯動選擇

js 本來返回的是地區編號,需要在後台轉換,這裡我改了一點,直接在js 裡就轉換了,返回的就是地區名 原理是js 控制的聯動查詢,通過一些判斷語句 將選擇的結果另外放在了隱藏的輸入框裡,後台讀取隱藏的輸入框就好,如將出生省份的值存到了id為txtchildrenprovince的輸入框 docume...

Jquery實現省市區聯動

jquery 省市縣聯動外掛程式 author kxt example test province city county fn.province city county function vprovince,vcity,vtown get xml province city.xml functio...

省市區城市級聯

約定 省市區 城市聯動效果,選擇框預設全部顯示,選擇後根據實際情況顯示或隱藏。在省得select上加上屬性 load data 330102 即表示頁面需把330102這個對應的相關select做相應選中。json資料結構 城市編碼6位 每2位表示一級 城市層級,上一級編碼,城市名稱,其他根據業務實...