distpicker.js制作省市区三级联动

1.html

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.txzlLi {
				margin-top: 20px;
				height: 40px;
				border: 1px solid #c6c6c6;
				border-radius: 40px;
				-webkit-border-radius: 40px;
				-moz-border-radius: 40px;
				width: 690px;
				font-size: 18px;
			}
			.txzlUl .txzlLi .txzlLiL {
				height: 40px;
				line-height: 40px;
				padding-left: 40px;
				width: 100px;
				float: left;
			}
			.txzlUl .txzlLi .txzlLiR {
				height: 40px;
				width: 550px;
				float: left;
			}
			.distpicker-my .form-group {
				float: left;
				margin-left: 10px;
			}
			.distpicker-my .sr-only {
				position: absolute;
				width: 1px;
				height: 1px;
				padding: 0;
				margin: -1px;
				overflow: hidden;
				border: 0;
				display: inline-block;
			}
			.distpicker-my .form-control {
				display: inline-block;
				width: auto;
				vertical-align: middle;
				height: 40px;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				border: 0;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<ul class="txzlUl">
			<li class="txzlLi clearfix">
				<div class="txzlLiL">
					所在地区：
				</div>
				<div class="txzlLiR">
					<div class="distpicker-my">
						<div data-toggle="distpicker" id="distpicker1" class="clearfix">
							<div class="form-group">
								<label class="sr-only" for="province1">Province</label>
								<select class="form-control" id="province1"></select>
							</div>
							<div class="form-group">
								<label class="sr-only" for="city1">City</label>
								<select class="form-control" id="city1"></select>
							</div>
							<div class="form-group">
								<label class="sr-only" for="district1">District</label>
								<select class="form-control" id="district1"></select>
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/distpicker/2.0.6/distpicker.js"></script>
		<script type="text/javascript">
			// 三级联动（及地址）
			// http://www.jq22.com/jquery-info8054
			$('#distpicker1').distpicker({
				autoSelect: true
			});
			$('#province1').on('change', function() {
				var index = $(this).find(":selected").index();
				var value = $(this).find(":selected").val();
				console.log('选择的index： ' + index, '选择的value： ' + value)
			});
			$('#city1').on('change', function() {
				var index = $(this).find(":selected").index();
				var value = $(this).find(":selected").val();
				console.log('选择的index： ' + index, '选择的value： ' + value)
			});
			$('#district1').on('change', function() {
				var index = $(this).find(":selected").index();
				var value = $(this).find(":selected").val();
				console.log('选择的index： ' + index, '选择的value： ' + value)
			});
		</script>
	</body>
</html>

2.效果

3.说明：

3.1参数配置：

autoSelect：类型：Boolean，默认值：true。是否当省改变时自动选择市和区。
placeholder：类型：Boolean，默认值：true。是否显示占位文本。
province：类型：String，默认值：―― 省 ――。定义省份的初始值。如果在distpicker.data.js文件中存在该省份，将会被选择，否则显示占位文本。
city：类型：String，默认值：―― 市 ――。定义市的初始值。如果在distpicker.data.js文件中存在该市，将会被选择，否则显示占位文本。
district：类型：String，默认值：―― 区 ――。定义区的初始值。如果在distpicker.data.js文件中存在该区，将会被选择，否则显示占位文本。

3.2 其他用法参考地址：

地址1：http://www.jq22.com/jquery-info8054

地址2：http://www.jq22.com/yanshi8054

distpicker.js制作省市区三级联动

猜你喜欢