<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body οnlοad="loadProv()">
<select id="prov" οnchange="provchange()">
<option value="none">請選省份 </option>
</select>
<select id="city"></select>
</body>
</html>
<script type="text/javascript">
var data = { "山東": ["濟南", "青島", "北京"], "安徽": ["淮南", "銅陵", "黃山"], "浙江": ["杭州", "寧波", "紹興"] }
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement('option');
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provchange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
var provName = prov.value;
var cities = data[provName];
//city.options.length = 0;
for (var i = city.childNodes.length-1; i >=0 ; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}
var provName = prov.value;
if (provName == "none") {
return;
}
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>js聯動select
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章