HTML+CSS+JavaScript实现全国三级城市select选择

我爱布朗熊

已于 2022-07-05 22:30:40 修改

阅读量4k

点赞数 1

分类专栏：前端文章标签： javascript css html

于 2022-03-13 22:50:09 首次发布

本文链接：https://blog.csdn.net/weixin_51351637/article/details/123468276

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

下面先展示效果图

这个图片就是一打开网站默认的情况下的图片

下面的图片就是进行切换省之后的样子

在下面的程序中，将省略部分省市县。

下面是HTML文件中的内容

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>全国三级城市</title>

<link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
   <body>
       <select id="province">
           
       </select>
       <select id="city">
           
       </select>
       <select id="district">
           
       </select>

<script src="js.js" type="text/javascript" charset="utf-8"></script>

   </body>
</html>

下面是CSS文件中的内容，可有可无。这次的侧重点不在CSS（标签选择器）

select{
width: 100px;
height: 30px;
}

下面的代码是JS文件中的代码

/* 监听选中操作下面这行代码绑定事件 */
/* 当省份选中的时候 */
province.onchange = changeProvince;

function changeProvince() {
   /* 当province改变的时候，就会执行这段代码 */
   /* 一定要清空上一个省份下面的市以及县级别 */
   city.length = 0;
district.length=0;
   /* province.selectedIndex 这个属性会告诉你选中的第几个，类似一个标号 */
   var cityList = provinceList[province.selectedIndex].cityList;
   for (var i = 0; i < cityList.length; i++) {
       var option = new Option(cityList[i].name, cityList[i].name);
       city.options.add(option);
       /* 这段代码和省的加入的那段代码相同 */
   }
   /* 这一行代码也很关键，相当于给了一个选择的默认值，当选择了省以后，就会出来市（上面代码实现的） */
   /* 接下来还会出现县级单位，是下面这行代码所实现的 */
   changeCity();
}

/* 当城市被选中的时候 */
city.οnchange=changeCity;

function changeCity(){
   /* 要求市一下的进行展示 */
   /* 将以前的清零 */
   district.length=0;
   var districtList = provinceList[province.selectedIndex].cityList[city.selectedIndex].districtList;
for(var i=0;i<districtList.length;i++){
   var option = new Option(districtList[i],districtList[i]);
   district.options.add(option);
}
}

/* 当不做操作的时候，放一个默认值，就是一打开页面就有的一个默认值 */
changeProvince();
changeCity();