Interface:
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#top {
background-color: #87CEFA;
}
label {
color: #ffffff;
}
</style>
<script type="text/javascript">
var provs = new Array(); //数组，集合
provs['北京市'] = ['北京市'];
provs['上海市'] = ['上海市'];
provs['天津市'] = ['天津市'];
provs['重庆市'] = ['重庆市'];
provs['湖北省'] = ['武汉市', '黄石市', '宜昌市', '洪湖市'];
provs['湖南省'] = ['长沙市', '常德市', '岳阳市'];
var wuyeTypes = ['普通住宅', '公寓', '别墅', '经济适用房', '商住楼', '写字楼'];
function load() {
loadProvice();
loadType();
}
//加载省份
function loadProvice() {
document.getElementById("provice").options.add(new Option("-请选择城市-", ""));
for(var i in provs) {
document.getElementById("provice").options.add(new Option(i, i));
}
}
//加载城市
function loadCity() {
var selectedPro = document.getElementById("provice").value;
//先清空城市列表
document.getElementById("city").options.length = 0;
for(var i in provs) {
if(i == selectedPro) { //判断是否为选中的省份
for(var j in provs[i]) {
document.getElementById("city").options.add(new Option(provs[i][j], provs[i][j]));
}
}
}
}
//加载物业类型
function loadType() {
document.getElementById("wuyeType").options.add(new Option("物业类型", ""));
for(var i in wuyeTypes) {
document.getElementById("wuyeType").options.add(new Option(wuyeTypes[i], wuyeTypes[i]));
}
}
</script>
</head>
<body οnlοad="load()">
<img src="img/option-top.jpg" />
<div id="top">
<form>
<table>
<tr>
<td><label>房源查询：</label></td>
<td><select id="provice" οnchange="loadCity()"></select></td>
<td><select id="city" style="width: 100px;"></select></td>
<td><select id="wuyeType"></select></td>
<td><input type="button" value="查询" style="width: 60px;" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
