省市區聯動 jquery

時間 2019-11-06

原文原文鏈接

省市區聯動 jquery插件很不錯。javascript

連接地址：http://www.imuum.com/demo/cityselect/index.htmlcss

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="ajax,jquery,省市聯動" />
	<meta name="description" content="ijquery演示平臺，演示XHTML、CSS、jquery、PHP案例和示例" />
	<title>插件jquery.cityselect.js基於jQuery+JSON的省市聯動效果</title>
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<style type="text/css">
	.demo{width:80%; margin:20px auto}
	.demo h3{height:32px; line-height:32px}
	.demo p{line-height:24px}
	pre{margin-top:10px; padding:6px; background:#f7f7f7}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.cityselect.js"></script>
	<script type="text/javascript">
	$(function(){
	$("#city_1").citySelect({
	nodata:"none",
	required:false
	});
	$("#city_2").citySelect({
	prov:"北京",
	nodata:"none"
	});

	$("#city_3").citySelect({
	prov:"湖南",
	city:"長沙"
	});
	$("#city_4").citySelect({
	prov:"湖南",
	city:"長沙",
	dist:"嶽麓區",
	nodata:"none"
	});

	$("#city_5").citySelect({
	url:{"citylist":[
	{"p":"前端技術","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
	{"p":"編程語言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
	{"p":"數據庫","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
	]},
	prov:"",
	city:"",
	dist:"",
	nodata:"none"
	});
	});
	</script>
	</head>

	<body>
	<div id="main">
	<h2 class="top_title"><a href="http://blog.codejie.net">插件：jquery.cityselect.js基於jQuery+JSON的省市聯動效果</a></h2>
	<div class="demo">
	<h3>直接調用</h3>
	<p>二級聯動，默認選項爲：請選擇</p>
	<div id="city_1">
	<select class="prov"></select>
	<select class="city" disabled="disabled"></select>
	</div>
	<p>三級聯動，默認省份：北京，隱藏無數據的子級select</p>
	<div id="city_2">
	<select class="prov"></select>
	<select class="city" disabled="disabled"></select>
	<select class="dist" disabled="disabled"></select>
	</div>
	<pre>
	$("#city_1").citySelect({nodata:"none",required:false});
	$("#city_2").citySelect({prov:"北京",nodata:"none"});
	</pre>
	</div>

	<div class="demo">
	<h3>設置省份、城市、地區（縣）的默認值</h3>
	<p>二級聯動</p>
	<div id="city_3">
	<select class="prov"></select>
	<select class="city" disabled="disabled"></select>
	</div>
	<p>三級聯動</p>
	<div id="city_4">
	<select class="prov"></select>
	<select class="city" disabled="disabled"></select>
	<select class="dist" disabled="disabled"></select>
	</div>
	<pre>
	$("#city_3").citySelect({prov:"湖南", city:"長沙"});
	$("#city_4").citySelect({prov:"湖南", city:"長沙", dist:"嶽麓區"});
	</pre>
	</div>

	<div class="demo">
	<h3>自定義下拉選項</h3>
	<div id="city_5">
	<select class="prov"></select>
	<select class="city" disabled="disabled"></select>
	<select class="dist" disabled="disabled"></select>
	</div>
	<pre>
	$("#city_5").citySelect({
	url:{"citylist":[
	{"p":"前端技術","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
	{"p":"編程語言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
	{"p":"數據庫","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
	]},
	prov:"",
	city:"",
	dist:"",
	nodata:"none"
	});
	</pre>
	</div>
	<div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div>
	<br />
	<br />

	</div>
	<div id="footer">
	<p>Powered by 木木博客容許轉載、修改和使用本站的DEMO，但請註明出處：<a href="http://blog.codejie.net">blog.codejie.net</a></p>
	</div>
	</body>
	</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。