1. 程式人生 > >省市聯動——季度-月份下拉列表框——省市聯動類庫版

省市聯動——季度-月份下拉列表框——省市聯動類庫版

引入的jQuery類庫:

city.min.js;
jquery.cityselect.js;
jquery-1.6.1.js

原始碼:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>省市聯動</title>
<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/city.min.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
<script type="text/javascript">
$(function(){
	$("#city_5").citySelect({
		url:{"citylist":[
		        {"p":"請選擇","c":[{"n":"請選擇月份"}]},
		        {"p":"第一季度","c":[{"n":"請選擇月份"},{"n":"1月"},{"n":"2月"},{"n":"3月"}]},
		        {"p":"第二季度","c":[{"n":"請選擇月份"},{"n":"4月"},{"n":"5月"},{"n":"6月"}]},
		        {"p":"第三季度","c":[{"n":"請選擇月份"},{"n":"7月"},{"n":"8月"},{"n":"9月"}]},
		        {"p":"第四季度","c":[{"n":"請選擇月份"},{"n":"10月"},{"n":"11月"},{"n":"12月"}]},
			]},
		prov:"",
		city:"",
		dist:"",
		nodata:"none"
	});
});
</script>
</head>
<body>
<h3>季度-月份下拉列表框</h3>
  	<div id="city_5">
  		<select class="prov"></select>
		<select class="city" disabled="disabled"></select>
		<select class="dist" disabled="disabled"></select>
    </div>
</body>
</html>

顯示風格: