簡單的下拉列表--省市聯動（與後臺無互動）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery動態顯示錶單</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//資料集
var schools = [
{ 'id': 1, 'name': '南京大學' },
{ 'id': 2, 'name': '北京大學' },
{ 'id': 3, 'name': '浙江大學' },
{ 'id': 4, 'name': '清華大學'
},
{ 'id': 5, 'name': '湖南大學' },
];
//頁面載入執行，將資料集繫結select，顯示預設選中學校
$(function () {
bindSelect();
$('#info').text($('#schoolSelect'
).val());
});
//將資料集繫結select，重新選擇學校後顯示選中學校
bindSelect = function () {
var $schoolSelect = $('#schoolSelect');
$schoolSelect.change(function () {
$('#info').text($(this).val());
});
if (schools.length > 0) {
for (var i = 0; i < schools.length; i++) {
var item = schools[i];
if (item.id == 2) {
$schoolSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');
} else {
$schoolSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
}
}
}
}
</script>
</head>
<body>
<form>
<select id="schoolSelect">
</select>
<label id="info"></label>
</form>
</body>
</html>
參考文件：https://www.jb51.net/article/134450.htm
二、省市聯動
<!DOCTYPE html>
<html>
<head>
<!-- 頁面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
// 定義陣列：二維陣列：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","紹興市","溫州市","義烏市","嘉興市");
arrs[1] = new Array("南京市","蘇州市","揚州市","無錫市");
arrs[2] = new Array("武漢市","襄陽市","荊州市","宜昌市","恩施");
arrs[3] = new Array("石家莊市","唐山市","保定市","邢臺市","廊坊市");
arrs[4] = new Array("長春市","吉林市","四平市","延邊市");
function changeCity(value){
// 獲得到選中的省份的資訊.
var city = document.getElementById("city");
// 清除第二個列表中的內容:
for(var i=city.options.length-1;i>0;i--){
city.options[i] = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 獲得所有的市的資訊.
for(var j=0;j<arrs[i].length;j++){
// alert(arrs[i][j]);
// 建立元素：
var opEl = document.createElement("option");// <option></option>
// 建立文字節點:
var textNode = document.createTextNode(arrs[i][j]);
// 將文字的內容新增到option元素中.
opEl.appendChild(textNode);
// 將option的元素新增到第二個列表中.
city.appendChild(opEl);
}
}
}
}
</script>
</head>
<body >
<!-- .box-body -->
<tr>
<td>籍貫</td>
<td>
<select id="province" name="province" onchange="changeCity(this.value)">
<option value="">-請選擇-</option>
<option value="0">浙江省</option>
<option value="1">江蘇省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-請選擇-</option>
</select>
</td>
</tr>
</body&g