本文通过一个实例讲述了用原生JavaScript实现的省市县简单联动功能。分享给大家参考，如下：

我们写表格的时候，三级联动是必不可少的。例如，我们在写送货地址时会用到它。最近在读原生JavaScript，从基础开始，等待改进，以后再写jquery版本

！doctype html lang=' en ' head meta charset=' utf-8 ' title三级链接菜单/title style select { font-family : ' Lolita第二版'；}.隐藏{ display: none}/style/headsdydiv select id='省份'选项-请选择-/option/selectselect id='城市' class='隐藏'选项-请选择-/option/Selectselect id='地区' class='隐藏'选项-请选择-/option/select/scriptvar provens list=['北京'，'河北'，'浙江']；Var cityList=[['东城区'，'西城区'，'海淀区']，['廊坊市'，'唐山市'，'石家庄市'，'承德市'，['杭州市'，'温州市'，'宁波市'，'嘉兴市'，'绍兴市'] Varares list=['东城区1 '，'东城区2 '，'东城区3']，['西城区1 '，'西城区2 '，'西城区3']，['海淀区1 '，'海淀区2 '，'海淀区3']，['廊坊市1 '唐山市3 '， 唐山市4']，['石家庄市1 '，'石家庄市2 '，'石家庄市3 '，'石家庄市4']，['承德市1 '，'承德市2 '，'承德市3 '，'承德市4']，['杭州市1 '，]温州3 '，'温州4 '，'温州5']，['宁波1 '，'宁波2 '，'宁波3 '，'宁波4 '，'宁波5 '，['嘉兴1 '，'嘉兴2 '，'嘉兴3 '，'嘉兴4 '/1。 获取元素var省份=document.getelementbyid('省份')；var city=document . getelementbyid(' city ')；var area=document . getelementbyid(' area ')；//2.为省的选择框指定一个值。//-使用自执行函数避免污染全局变量-(-(function(){ for(var I=0；i provinceList.lengthI){ var my option=document . create element(' option ')；myOption . innerHTMl=ProvinCe list[I]；//设置值myOption . value=I；省份. appendchild(my Option)；}})();//3.设置行为功能省。onchange=function (e) {city。风格。display=' inline-block '；//设置第二次出现的while (city。children . length 1){//当省份设置为“请选择”时，删除子元素city。removechild(城市。lastelementchild)；} while(区域。children . length 1){//当城市设置为“请选择”时，删除子元素区域。removechild(区域。lastelementchild)；}如果(cityList[this.value]) {//当设置为请选择时，列表为(var I=0；i cityList[this.value]。长度；I) {//添加城市列表var my option=document . create element(' option ')；myOption . innerhtml=city list[this . value][I]；//设置值myOption . value=I；city . appendchild(my Option)；}}};//4.设置行为功能城市。onchange=function (e) {area。风格。display=' inline-block '；//设置第二次出现的while(区域。children . length 1){//当城市设置为“请选择”时，删除子元素区域。removechild(区域。lastelementchild)；} if(areas list[省份。值][这个。value]){//当设置为‘请选择’时，列表为(var I=0；I区域列表[省.值][此.值]。长度；I) {//添加城市列表var my option=document . create element(' option ')；myOption . innerhtml=areas list[省份.值][this . value][I]；area . appendchild(my Option)；}}}/script/body/html运行如下：

关于JavaScript的更多信息，请参考本网站的主题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。