城市联动日期联动是个很常用的功能，实现起来也各式各样，下面记录一个比较清楚简单的方法，以备今后查询。
1.城市联动
a.js代码部分：
<head>
<title></title>
<script type="text/javascript">
function addProvince()
{
var prov = document.getElementById("province");
var provs = ["河南", "河北", "山西", "新疆"];
prov.length = ;
for (var i=;i<provs.length ; i++)
{
var op = document.createElement("option");
op.value = provs[i];
op.innerHTML = provs[i];
prov.appendChild(op);
}
addCity();
}
function addCity()
{
var city = document.getElementById("city");
var cities = [
["郑州市","洛阳市","开封市","南阳市"],
["石家庄市","邯郸市","保定市"],
["太原市","大同市","晋城市","运城市"],
["乌鲁木齐市","吐鲁番地区","哈密","昌吉"]
];
var provIndex = document.getElementById("province").selectedIndex;
city.length = ;
for (var i=; i<cities[provIndex].length; i++)
{
var op = document.createElement("option");
op.value = cities[provIndex][i];
op.innerHTML = cities[provIndex][i];
city.appendChild(op);
}
}
</script>
</head>
b.<body>中代码部分：
<body onload="addProvince()">
<center>
<form method="post" >
省份：<select id="province" onchange="addCity()">
</select>
城市：<select id="city">
</select>
</form>
</center>
</body>
2.日期联动：
a.js代码部分:
<head>
<title></title>
<script type="text/javascript">
function addOption()
{
for (var i=; i<; i++)
{
document.getElementById("year").options[i] = new Option(+i, +i);
}
for (var i=; i<=; i++)
{
document.getElementById("month").options[i-] = new Option(i, i);
document.getElementById("month").options[].selected = true;
}
}
function changeOption()
{
var yearIndex = document.getElementById("year").selectedIndex;
var year = document.getElementById("year").options[yearIndex].value;
var monthIndex = document.getElementById("month").selectedIndex;
var month = document.getElementById("month").options[monthIndex].value;
var isLeap = ((year % == && year % != ) || (year % == && year % == ));
if (isLeap && (month == ))
{
for (var i=; i<=; i++)
{
document.getElementById("day").options[] = null;
document.getElementById("day").options[] = null;
document.getElementById("day").options[i-] = new Option(i, i);
}
}
if (!isLeap && (month == ))
{
for (var i=; i<=; i++)
{
document.getElementById("day").options[] = null;
document.getElementById("day").options[] = null;
document.getElementById("day").options[] = null;
document.getElementById("day").options[i-] = new Option(i, i);
}
}
if (month == || month == || month == || month == || month == || month == || month == )
{
for (var i=; i<=; i++)
{
document.getElementById("day").options[i-] = new Option(i, i);
}
}
if (month == || month == || month == || month == ) //判断是否为非2月
{
for (var i=; i<=; i++)
{
document.getElementById("day").options[] = null;
document.getElementById("day").options[i-] = new Option(i, i);
}
}
}
</script>
</head>
b.<body>中代码部分：
<body onload="addOption();changeOption()">
<form action="" method="post" >
<select id="year" size="1" onchange="changeOption()">
<option></option>
</select>年
<select id="month" size="1" onchange="changeOption()">
<option></option>
</select>月
<select id="day" size="1">
<option></option>
</select>日
</form>
</body>
上面是年月日的三级联动和省市的二级联动的一个示例，也可以用json等实现，后面再说。
以上就是html+js实现城市联动、日期联动示例的详细内容，更多关于html+js实现城市联动、日期联动示例的资料请关注九品源码其它相关文章！