省市联动js
<style type="text/css">
select
{
width: 135px;
}
fieldset dl dd
{
float: left;
margin-left: 20px;
}
fieldset pre
{
width: 100%;
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<!-- jQuery庫(kù)文件引入 -->
<script language="javascript" type="text/javascript" src="libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript">
//定義數(shù)組，存儲(chǔ)省份信息
var province = ["北京"];
//定義數(shù)組,存儲(chǔ)城市信息
var beijing = ["東城區(qū)", "西城區(qū)", "海淀區(qū)", "朝陽(yáng)區(qū)", "豐臺(tái)區(qū)", "石景山區(qū)", "通州區(qū)", "順義區(qū)", "房山區(qū)", "大興區(qū)", "昌平區(qū)", "懷柔區(qū)", "平谷區(qū)", "門(mén)頭溝區(qū)", "延慶縣", "密云縣"];
//頁(yè)面加載方法
$(function () {
//設(shè)置省份數(shù)據(jù)
setProvince();
//設(shè)置背景顏色
setBgColor();
});
//設(shè)置省份數(shù)據(jù)
function setProvince() {
//給省份下拉列表賦值
var option, modelVal;
var $sel = $("#selProvince");
//獲取對(duì)應(yīng)省份城市
for (var i = 0, len = province.length; i < len; i++) {
modelVal = province[i];
option = "<option value='" + modelVal + "'>" + modelVal + "</option>";
//添加到 select 元素中
$sel.append(option);
}
//調(diào)用change事件，初始城市信息
provinceChange();
}
//根據(jù)選中的省份獲取對(duì)應(yīng)的城市
function setCity(provinec) {
var $city = $("#selCity");
var proCity, option, modelVal;
//通過(guò)省份名稱，獲取省份對(duì)應(yīng)城市的數(shù)組名
switch (provinec) {
case "北京":
proCity = beijing;
break;
case "上海":
proCity = shanghai;
break;
}
//先清空之前綁定的值
$city.empty();
//設(shè)置對(duì)應(yīng)省份的城市
for (var i = 0, len = proCity.length; i < len; i++) {
modelVal = proCity[i];
option = "<option value='" + modelVal + "'>" + modelVal + "</option>";
//添加
$city.append(option);
}
//設(shè)置背景
setBgColor();
}
//省份選中事件
function provinceChange() {
var $pro = $("#selProvince");
setCity($pro.val());
}
//設(shè)置下拉列表間隔背景樣色
function setBgColor() {
var $option = $("select option:odd");
$option.css({ "background-color": "#DEDEDE" });
}
</script>
<body>
<fieldset>
<legend>中國(guó)三級(jí)行政單位聯(lián)動(dòng)</legend>
<dl>
<dd>
省 份：<select id="selProvince" οnchange="provinceChange();"></select>
</dd>
<dd>
市(區(qū))：<select id="selCity"></select>
</dd>
</dl>
</fieldset>
</body>
轉(zhuǎn)載于:https://www.cnblogs.com/Nigeria/p/8708999.html
總結(jié)
- 上一篇： webapp 状态栏沉浸式
- 下一篇： linux下的定时任务 每天0点重置 t