使用Jquery和JSON的州和城市列表

風靈使發表於2019-04-06
<!DOCTYPE html>
<html>
<head>
	<title>使用Jquery和JSON的州和城市列表</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="col-sm-6">
	<h2>使用Jquery和JSON的州和城市列表</h2>
	<select class="form-control" id="State">
		<option>選擇州</option>
	</select>
	<br>
	<select class="form-control" id="City">
		<option>選擇城市</option>
	</select>
	
</div>
</div>

</body>
</html>

<script>
	$(document).ready(function(){
		load_json('State');
		function load_json(id, city_id){
			var html = '';

			$.getJSON('https://xxxx.com/democitys.json', function(data){
				html += '<option>選擇'+ id +'</option>';
				console.log(data);
				if(id == 'State' && city_id == null){
					for(var i = 0; i < data.states.length; i++){
						html += '<option value='+ data.states[i].sigla +'>'+ data.states[i].name+'</option>';
					}
				}else{
					for(var i = 0; i < data.states.length; i++){
						if(data.states[i].sigla == city_id){
							for(var j = 0; j < data.states[i].cities.length; j++){
								html += '<option value='+ data.states[i].sigla +'>'+data.states[i].cities[j]+ '</option>';
							}
						}
					}
				}

				$('#'+id).html(html);
			});
			
		}

		$(document).on('change', '#State', function(){
			var city_id = $(this).val();
			console.log(city_id);
			if(city_id != null){
				load_json('City', city_id);
			}
		});

	});
</script>

如圖

在這裡插入圖片描述

相關文章