使用json和jquery级联选择

selects.html

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:600,400" rel="stylesheet" type="text/css">
		<link href="styles/styles.css" rel="stylesheet" type="text/css">
		<script src="js/jquery-2.1.4.min.js">
		</script>
	</head>
	<body>
		<form action="#" method="get">
			<h2 class="select-header">
				国家
			</h2>
			<select name="country_id" id="country_id">
				<option value="">
					- 选择国家 -
				</option>
				<option value="Canada">
					加拿大
				</option>
				<option value="USA">
					美国
				</option>
			</select>
			<h2 class="select-header">
				区域
			</h2>
			<select name="region_id" id="region_id" disabled="disabled">
				<option value="0">
					- 选择地区 -
				</option>
			</select>
			<h2 class="select-header">
				市
			</h2>
			<select name="city_id" id="city_id" disabled="disabled">
				<option value="0">
					- 选择城市 -
				</option>
			</select>
		</form>
		<div class="result" id="result">
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function() {
			$.ajax({
				url: "cities.json",
				dataType: "text",
				success: function(data) {
					window.jsonString = $.parseJSON(data);
				},
				error: function() {
					alert('无法加载文件cities.json')
				}
			});

			$('#loader1').click(function() {
				$(this).load('example.json');
			});

			function getRegions(countryId) {
				var i = 0,
				options = '',
				regionList = Object.keys(jsonString[countryId]);
				while (i < regionList.length) {
					options += '<option value="' + regionList[i] + '">' + regionList[i] + '</option>';
					i++;
				};
				$('#region_id').html(options);
				$('#region_id').attr('disabled', false);
			};

			function getCities(countryId, regionID) {
				var i = 0,
				options = '',
				cityList = jsonString[countryId][regionID];
				while (i < cityList.length) {
					options += '<option value="' + cityList[i] + '">' + cityList[i] + '</option>';
					i++;
				};
				$('#city_id').html(options);
				$('#city_id').attr('disabled', false);
			}

			function getOptions(countryId, regionId) {
				var i = 0,
				options = '';
				if (regionId != undefined) optionsList = jsonString[countryId][regionId]
				else optionsList = Object.keys(jsonString[countryId]);

				while (i < optionsList.length) {
					options += '<option value="' + optionsList[i] + '">' + optionsList[i] + '</option>';
					i++;
				}
				return options;
			}

			$('#country_id').change(function() {
				var id = $(this).val();
				$('#city_id').attr('disabled', true);
				if (id === '') {
					$('#region_id').attr('disabled', true).html('<option value=""> -选择地区- </option>');

				} else {
					var regionOptions = getOptions(id);
					$('#region_id').html(regionOptions);
					$('#region_id').attr('disabled', false);
				}
			});

			$('#region_id').change(function() {
				var id = $(this).val();
				if (id === '') {
					$('#city_id').attr('disabled', true).html('<option value=""> -选择城市- </option>');

				} else {
					var cityOptions = getOptions($('#country_id').val(), id);
					$('#city_id').html(cityOptions);
					$('#city_id').attr('disabled', false);
				}
			})
		});
	</script>

</html>

cities.json

{
  "Canada":
  {
    "萨斯喀彻温省": ["伊利","萨斯卡通"],
    "不列颠哥伦比亚省":["维多利亚", "温哥华"],
    "艾伯塔省": ["埃德蒙顿","卡尔加里"]
  },
  "USA":
  {
    "阿拉巴马":["阿布维尔","伯明翰"],
    "得克萨斯": ["达拉斯", "泰勒"],
    "加利福尼亚": ["斯托克顿","塔斯廷"]
  }

}

结果如图:

在这里插入图片描述

使用json和jquery级联选择

selects.html

cities.json

结果如图:

猜你喜欢