wangyunqi-dynamicDropdown
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.css" />
		<script type="text/javascript" src="plugin/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/bootstrap/js/bootstrap.js"></script>
		<!-- 引入联动组件 -->
		<script type="text/javascript" src="dynamicDropdown.js"></script>
		<title>下拉联动之自定义多级联动</title>
	</head>

	<body>
		<div>
			<h2>下拉联动之自定义多级联动</h2>
			<p><strong>组件描述：</strong><br>该下拉联动组件可通过参数的配置自由指定联动的级数和数据的来源</p>
			<p><strong>使用步骤：</strong></p>
			<ol>
				<li>在HTML中引入<code>&lt;form class="form-inline"&gt;&lt;div id="example"&gt;&lt;/div>&lt;/form&gt;</code></li>
				<li>引入HTML后，js调用<code>$("#example").dynamicDropdown(params)</code>初始化下拉联动列表，params需要是key：value的形式的JSON对象。参数描述如下：</li>
				<table class="table table-bordered">
					<tr>
						<th>参数名</th>
						<th>类型</th>
						<th>描述</th>
					</tr>
					<tr>
						<td>grade</td>
						<td><strong>数字（number）</strong>&nbsp;&nbsp;如：5</td>
						<td>下拉联动级数<strong>（必填）</strong></td>
					</tr>
					<tr>
						<td>emptyStyle</td>
						<td><strong>数组（array）</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如：["省", "市", "县", "乡", "村"]</td>
						<td>没有选择结果时默认显示样式</td>
					</tr>
					<tr>
						<td>jsonUrl</td>
						<td><strong>字符串（url）</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如：area.json</td>
						<td>多级联动的数据JSON数据源<strong>（必填）</strong></td>
					</tr>
					<tr>
						<td>jsonKey</td>
						<td><strong>数组（array）</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如：["province", "city", "county", "town", "village"]</td>
						<td>多级联动中JSON数据中每级数据对应的key<strong>（必填）</strong></td>
					</tr>
					<tr>
						<td>defaultValue</td>
						<td><strong>JSON对象</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如：{"province":"13", "city":"1305", "county":"130523", "town":"130523101", "village":"130523101202"}</td>
						<td>下拉联动默认值</td>
					</tr>
				</table>
			</ol>
			<p><strong>注意事项：</strong><br>通过jsonUrl获取联动参数，返回结果需要是JSON数据格式<br>如： [ "province": [{"code": **, "name":**}], "city": [{"code": **, "name":**}], "county": [{"code": **, "name":**}], "town": [{"code": **, "name":**}], "village": [{"code": **, "name":**}] ]</p>
		</div>


		<!-- HTML代码  -->
		<p><strong>效果：</strong></p>
		<form class="form-inline">
			<div id="example"></div>
		</form>
	</body>

	<script>
		$(function() {
			//初始化下拉联动组件
			$("#example").dynamicDropdown({
				grade: 5,
				emptyStyle: ["--- 请选择省份 ---", "--- 请选择城市 ---", "--- 请选择县（区） ---", "--- 请选择乡（镇） ---", "--- 请选择村 ---"],
				jsonUrl: "area.json",
				jsonKey: ["province", "city", "county", "town", "village"],
				//defaultValue: {"province":"13", "city":"1305", "county":"130523", "town":"130523101", "village":"130523101202"},
			});
		});
	</script>

</html>