<
??
??
??
三級聯(lián)動demo??
??
window.onload=function()?{??
????????????//定義幾個省市區(qū)的數(shù)據(jù)??
varsheng_city?=?[??
????????????????["陜西省"],??
????????????????["江蘇省"],??
????????????????["山東省"]??
????????????];??
varshi_city?=?[??
????????????????["西安市",?"咸陽市",?"寶雞市"],??
????????????????["淮安市",?"鹽城市",?"揚州市"],??
????????????????["濟南市",?"德州市",?"聊城市"]??
????????????];??
varqu_city?=?[??
????????????????[??
????????????????????["高新區(qū)",?"長安區(qū)",?"未央?yún)^(qū)"],??
????????????????????["秦都區(qū)",?"咸陽區(qū)1",?"咸陽區(qū)2"],??
????????????????????["金臺區(qū)",?"成倉區(qū)",?"渭濱區(qū)"]??
????????????????],??
????????????????[??
????????????????????["淮安區(qū)1",?"淮安區(qū)2",?"淮安區(qū)3"],??
????????????????????["鹽城區(qū)1",?"鹽城區(qū)2",?"鹽城區(qū)3"],??
????????????????????["揚州區(qū)1",?"揚州區(qū)2",?"揚州區(qū)3"]??
????????????????],??
????????????????[??
????????????????????["濟南區(qū)1",?"濟南區(qū)2",?"濟南區(qū)3"],??
????????????????????["德州區(qū)1",?"德州區(qū)2",?"德州區(qū)3"],??
????????????????????["聊城區(qū)1",?"聊城區(qū)2",?"聊城區(qū)3"]??
????????????????]??
????????????];??
????????????//動態(tài)創(chuàng)建dom元素?添加省級選項??
varsheng?=?document.getElementById("sheng");??
for?(vari?=?0;?i?<?sheng_city.length;?i++)?{??
varoption?=?new?Option(sheng_city[i],?i);??
????????????????sheng.appendChild(option);??
????????????}??
????????????//添加省文本改變事件??
varshi?=?document.getElementById("shi");??
vars_index?=?0;//定義變量索引??
sheng.onchange?=?function?()?{??
shi.options.length?=?1;??
qu.options.length?=?1;??
s_index?=?this.value;??
for?(vari?=?0;?i?<?shi_city.length;?i++)?{??
varoption?=?new?Option(shi_city[s_index][i],?i);??
????????????????????shi.appendChild(option);??
????????????????}??
????????????};??
????????????//添加市文本改變事件??
varqu?=?document.getElementById("qu");??
varq_index?=?0;??
shi.onchange?=?function?()?{??
qu.options.length=1;??
q_index?=?this.value;??
for?(vari?=?0;?i?<?qu_city.length;?i++)?{??
varoption?=?new?Option(qu_city[s_index][q_index][i],?i);??
????????????????????qu.appendChild(option);??
????????????????}??
????????????}??
????????}??
省:??
---請選擇---??
市:??
---請選擇---??
區(qū):??
---請選擇---??
>
