级联菜单

最新推荐文章于 2019-07-05 06:25:59 发布

原创最新推荐文章于 2019-07-05 06:25:59 发布 · 551 阅读

CC 4.0 BY-SA版权

<html>
	<head>
		<title>Linkage_menu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var city=["hebei","henan","shandong"];
				$.each(city,function(i,item){
					$(".city").append("<option value='"+i+"'>"+this+"</option>");
				});
				var hebei_country=["shijiazhuang","baoding"];
				var henan_country=["zhengzhou","kaifeng","puyang"];
				var shandong_country=["jinan","qingdao","yantai"];
				var country=[];
				

				$(".city").change(function(){
				var city=$(".city").val();
				if(city==0){
					country=$.extend([],hebei_country);
				}
				if(city==1){
					country=$.extend([],henan_country);
				}
				if(city==2){
					country=$.extend([],shandong_country);
				}
				if(city==""||city==null||city==undefined){
					country=["Please choose country"];
				}
				console.log("country",country);
				$(".country").html("");
					$.each(country,function(i,n){
						$(".country").append("<option value='"+i+"'>"+this+"</option>");
					});
				});
			});
		</script>
	</head>
	<body>
		<div class="linkage_menu">
			<select class="city">
				<option value="">Please choose city</option>
			</select>
			<select class="country">
				<option value="">Please choose country</option>
			</select>
		</div>
	</body>
</html>