JavaScript

超轻量级php框架startmvc

JavaScript省市级联下拉菜单实例

更新时间:2020-04-22 11:55 作者:startmvc
最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下:<!DOCTYPEhtml><htmlla

最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 <select id="selProvince" onchange="changeCity()">
 <option>请选择省份</option>
 </select>
 <select id="selCity">
 <option>请选择城市</option>
 </select>
 <script>
 function $(ID){
 return document.getElementById(ID);
 }
 var cityList=new Array();
 cityList['北京市']=['东城区','西城区','昌平区'];
 cityList['河北省']=['保定','石家庄','定州'];
 cityList['江苏省'] = ['南京市','苏州市','无锡市'];
 cityList['浙江省'] = ['杭州市','宁波市','温州市'];
 cityList['四川省'] = ['四川省','成都市'];
 cityList['海南省'] = ['海口市'];
 function changeCity(){
 var province=$("selProvince").value;
 var city=$("selCity");
 city.options.length=0;
 for (var i in cityList) {
 if(i==province){
 for (var j in cityList[i]) {
 city.add(new Option(cityList[i][j],cityList[i][j]),null);
 }
 }
 }
 }
 function allCity(){
 var province=$("selProvince");
 for (var i in cityList) {
 province.add(new Option(i,i),null);
 }
 }

 window.onload=allCity;
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。