HTML+CSS+JavaScript实现全国三级城市select选择
下面先展示效果图
这个图片就是一打开网站默认的情况下的图片
下面的图片就是进行切换省之后的样子
在下面的程序中，将省略部分省市县。
下面是HTML文件中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全国三级城市</title>
<!--这段代码的意思就是引入CSS样式文件-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<select id="province">
<!-- 省 -->
</select>
<select id="city">
<!-- 市 -->
</select>
<select id="district">
<!-- 县 -->
</select>
<!--下面这段代码就是引入JS文件-->
<script src="js.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
下面是CSS文件中的内容，可有可无。这次的侧重点不在CSS（标签选择器）
select{
width: 100px;
height: 30px;
}
下面的代码是JS文件中的代码
var province = document.getElementById("province");
var city = document.getElementById("city");
var district = document.getElementById("district");
/*
两种方式创建元素
第一种：
var option=document.createElement("option");
option.text="上海";
option.value="sh";
province.appendChild(option);
第二种方法：
var option = new Option("上海","sh");
province.options.add(option);
*/
/* 这个数组里面存储的是对象 */
var provinceList = [{
name: "北京市",
cityList: [{
name: "市辖区",
districtList: ["东城区", "西城区"]
}, {
name: "县",
districtList: ["密云县", "延庆县"]
}]
},
{
name: "四川省",
cityList: [{
name: "成都市",
districtList: ["市辖区","锦江区","青羊区"]
}, {
name: "自贡市",
districtList: ["市辖区","自流井区","贡井区"]
}]
}
];
/* provinceList.length有多大，就说明省份有多少个 */
for (var i = 0; i < provinceList.length; i++) {
/* 这省份加入到第一组options中 */
/* 下面这个name是一个对象 */
var option = new Option(provinceList[i].name, provinceList[i].name);
/* 将新new出来的对象加入到option行列之中 */
province.options.add(option);
}
/* 监听选中操作 下面这行代码绑定事件 */
/* 当省份选中的时候 */
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();
HTML+CSS+JavaScript实现全国三级城市select选择相关推荐
- js实现全国三级城市联动select选择
/* * 全国三级城市联动 js版 */ function Dsy(){this.Items = {}; } Dsy.prototype.add = function(id,iArray){this. ...
- web前端课程设计 HTML+CSS+JavaScript旅游风景云南城市网页设计与实现 web前端课程设计代码 web课程设计 HTML网页制作代码
- 全国省市区三级城市联动下来选项select插件
area.js /* * 全国三级城市联动 js版 */ function Dsy(){this.Items = {}; } Dsy.prototype.add = function(id,iArra ...
- js三级联动地址选择
/* * 全国三级城市联动 js版wlit.版权所有 **/ function Dsy(){this.Items = {}; } Dsy.prototype.add = function(id,iAr ...
- HTML5期末大作业：旅游景点网站设计——成都(6页) HTML+CSS+JavaScript 大学生家乡网页设计作业模板下载 四川成都城市网页设计作业成品 静态HTML旅游景点网页制作下载...
HTML5期末大作业:旅游景点网站设计--成都(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- HTML大期末作业: 关于城市旅游的HTML网页设计——北京(5页) HTML+CSS+JavaScript 旅游网页设计网页HTML...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- HTML5期末大作业：旅游景点网站设计——成都(6页) HTML+CSS+JavaScript 大学生家乡网页设计作业模板下载 四川成都城市网页设计作业成品 静态HTML旅游景点网页制作下载
HTML5期末大作业:旅游景点网站设计--成都(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- html期末作业代码网页设计 城市旅游网站设计——城市旅游-北京(5页) HTML+CSS+JavaScript 主题度假酒店 计划出行北京
HTML5期末大作业:城市旅游网站设计--城市旅游-北京(5页) HTML+CSS+JavaScript 主题度假酒店 计划出行北京 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- HTML5期末大作业：美食城网站设计——美食城(5页) HTML+CSS+JavaScript 关于城市美食的HTML网页设计-----
HTML5期末大作业:美食城网站设计--美食城(5页) HTML+CSS+JavaScript 关于城市美食的HTML网页设计----- 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
最新文章
- 你所未知的人工智能应用领域
- Opengl-基本概念-可编程的渲染管线（僵硬啊）
- php pecl memcached,php – 安装PECL Memcached错误
- npm run mock | npm run dev只能启动一个
- 解析云原生2.0架构设计的8大关键趋势
- 为何高于四次的方程没有根式解？
- composer QA
- linux opencl安装方法,如何在Ubuntu上安装libOpenCL.so
- kafka下载及安装
- 防火墙基本应用（华为USG6000V）
- 微信公众号配置JSAPI支付
- PPT打开出错/可尝试修复此演示文稿
- 多机型手机外观清洁与检测设备设计
- 微信7.0版本与旧版更新对比 新版微信7.0版更新了什么
- 让手机支持OTG，不看绝对后悔！ - 我也做一回搬运工，解决RFID读卡器OTG支持问题
- excel斜线表头的制作
- Layui官方js正则验证手机号，邮箱，网址，日期，身份证
- hMailServer搭建邮件服务器，用自己的域名邮箱，酷一些吧
- 网站制作网站制作如何实现图文并茂
- Web API Request Content多次读取