簡單的下拉列表--省市聯動(與後臺無互動)
<!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