1. 有時候需要實現當用戶選擇一個選項之後，網頁上另一部分的內容就隨之變化，達到動態更新的目的，這時候我們就會想到ajax來實現區域性重新整理，接下來用一個簡單的例子演示：總共有兩個select選擇框，第一個是省份的選擇，第二個是對應省份的城市的選擇，目標是實現當用戶切換省份的時候，城市選擇框中的選項全部替換為對應省份的城市：

對應的html程式碼，主體就是兩個選擇框

<div class="container">
<span style="white-space:pre">	</span><select name="province" id="proSelector">
		<option value="請選擇省份">請選擇省份</option>
	</select>

	<select name="city"  id="citySelector">
		<option value="請選擇城市">請選擇城市</option>
	</select>
</div>
 

：

基本效果類似下圖：

接下來為select框新增option：

為避免手動寫入大段重複的html程式碼，我們採用js來實現option的增添，首先我們需要省份資訊資料，以json格式資料為例，province.json，格式如下（由於資料太長，只貼上部分作展示，完整版請參看原始碼）：

[{
    "ProID": 1,
    "name": "北京市",
    "ProSort": 1,
    "ProRemark": "直轄市"
}, {
    "ProID": 2,
    "name": "天津市",
    "ProSort": 2,
    "ProRemark": "直轄市"
}, {
    "ProID": 3,
    "name": "河北省",
    "ProSort": 5,
    "ProRemark": "省份"
}]
 

然後通過js遍歷json去為每個省份新增一個option：

$.get('../src/province.json', function(data) {
	for (var i in data) {
		$("#proSelector").append("<option value='"+data[i].name+"'>"+data[i].name+"</option>");
	};
});

然後就能得到下圖所示效果，省份資料已經新增：

左側為省份選擇器，使用者可以切換選擇的省份資訊：

接下來為右側select動態新增城市：

首先我們得知道當前使用者選擇的省份資訊，一句話搞定：

var selectedPro = $("#proSelector").val();

然後我們需要一份全國城市的資料，仍然以json格式資料為例city.json（由於資料太長，只貼上部分作展示，完整版請參看原始碼）：

[{
    "CityID": 1,
    "name": "北京市",
    "ProID": 1,
    "CitySort": 1
}, {
    "CityID": 2,
    "name": "天津市",
    "ProID": 2,
    "CitySort": 2
}, {
    "CityID": 3,
    "name": "上海市",
    "ProID": 9,
    "CitySort": 3
}]

遍歷城市資訊，從中提取當前所選省份擁有哪些城市，我們可以通過ProID去尋找，所以我們首先從province.json中獲取這個ID：

function getProID(proName, cb) {
	var proID = null;
	$.get('../src/province.json', function(data) {
		for (var i in data) {
			if(proName == data[i].name){
				proID = data[i].ProID;
				cb(proID);
			};
		};
	});
}

然後用這個proID去city.json中匹配城市資訊，並將匹配的城市append到城市選擇器的option中，可以將其定義為一個函式updateCity()：

getProID(selectedPro, function(proID) {
	$.get('../src/city.json', function(data) {
		for (var i in data) {
			if(data[i].ProID == proID) {
				$('#citySelector').append("<option value='"+<span style="font-family: Arial, Helvetica, sans-serif;">data[i].name</span>+"'>"+<span style="font-family: Arial, Helvetica, sans-serif;">data[i].name</span>+"</option>");
			}
		};
	});
})

然後為城市動態更新繫結一個事件，選取省份選擇器的change事件作為觸發：

$('#proSelector').change(function(event) {
<span style="white-space:pre">	</span>updateCity();
})

然後就能得到我們想要的效果：

右側則為對應的城市選擇器：

當用戶切換選擇的省份時，右側選擇框中的城市資訊也會相應更新：