省市联动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庫文件引入 -->
<script language="javascript" type="text/javascript" src="libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript">
//定義數組，存儲省份信息
var province = ["北京"];
//定義數組,存儲城市信息
var beijing = ["東城區", "西城區", "海淀區", "朝陽區", "豐臺區", "石景山區", "通州區", "順義區", "房山區", "大興區", "昌平區", "懷柔區", "平谷區", "門頭溝區", "延慶縣", "密云縣"];
//頁面加載方法
$(function () {
//設置省份數據
setProvince();
//設置背景顏色
setBgColor();
});
//設置省份數據
function setProvince() {
//給省份下拉列表賦值
var option, modelVal;
var $sel = $("#selProvince");
//獲取對應省份城市
for (var i = 0, len = province.length; i < len; i++) {
modelVal = province[i];
option = "<option value='" + modelVal + "'>" + modelVal + "</option>";
//添加到 select 元素中
$sel.append(option);
}
//調用change事件，初始城市信息
provinceChange();
}
//根據選中的省份獲取對應的城市
function setCity(provinec) {
var $city = $("#selCity");
var proCity, option, modelVal;
//通過省份名稱，獲取省份對應城市的數組名
switch (provinec) {
case "北京":
proCity = beijing;
break;
case "上海":
proCity = shanghai;
break;
}
//先清空之前綁定的值
$city.empty();
//設置對應省份的城市
for (var i = 0, len = proCity.length; i < len; i++) {
modelVal = proCity[i];
option = "<option value='" + modelVal + "'>" + modelVal + "</option>";
//添加
$city.append(option);
}
//設置背景
setBgColor();
}
//省份選中事件
function provinceChange() {
var $pro = $("#selProvince");
setCity($pro.val());
}
//設置下拉列表間隔背景樣色
function setBgColor() {
var $option = $("select option:odd");
$option.css({ "background-color": "#DEDEDE" });
}
</script>
<body>
<fieldset>
<legend>中國三級行政單位聯動</legend>
<dl>
<dd>
省 份：<select id="selProvince" οnchange="provinceChange();"></select>
</dd>
<dd>
市(區)：<select id="selCity"></select>
</dd>
</dl>
</fieldset>
</body>
轉載于:https://www.cnblogs.com/Nigeria/p/8708999.html
總結
- 上一篇： webapp 状态栏沉浸式
- 下一篇： oc 计算 带括号 式子