省份下拉菜单实现

最新推荐文章于 2024-03-21 00:02:24 发布

蒙特利克

最新推荐文章于 2024-03-21 00:02:24 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： Javascript

本文链接：https://blog.youkuaiyun.com/qq_34647738/article/details/55055868

本文介绍如何利用JavaScript动态生成二级下拉菜单，根据一级菜单的选择更新二级菜单的选项。未选择一级菜单时，无法进行提交操作。首先，创建HTML文件，然后应用JavaScript逻辑来实现这一交互功能。

要求：

2个下来框，选择1级菜单后，2级菜单出现相应的备选项。如果没有选择则不能提交。

先创建html文件

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form>
		<select id="province">
			<option selected="selected">请选择...</option>
		</select>
		<select id="city">
			<option selected="selected">请选择...</option>
		</select>
		<button type="submit" id="where_submit" disabled="disabled">提交</button>
	</form>
</body>
<script type="text/javascript">

var provinces=['辽宁','北京','上海','吉林','浙江'];
//最新添加的省份放在最前面
var choice=['请选择...']
var zhejiang=['杭州','嘉兴','宁波','绍兴'];
var shanghai=['金山','闸北','普陀','徐汇'];
var jilin=['长春','辽源','吉林','四平'];
var beijing=['海淀','朝阳','东城','西城'];
var liaoning=['沈阳','大连','盘锦','锦州','辽阳','鞍山']
//城市排序由后到前
var citys=new Array;
citys[0]=choice;
citys[1]=zhejiang;
citys[2]=jilin;