您的位置：首页 > Web前端 > JavaScript

html+js实现城市联动、日期联动示例

2017-11-25 14:22 405 查看

html+js实现城市联动、日期联动示例.

城市联动日期联动是个很常用的功能，实现起来也各式各样，下面记录一个比较清楚简单的方法，以备今后查询。

1.城市联动

　　a.js代码部分：

<head>
<title></title>
<script type="text/javascript">
function addProvince()
{
var prov = document.getElementById("province");
var provs = ["河南", "河北", "山西", "新疆"];
prov.length = 0;
for (var i=0;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 = 0;
for (var i=0; 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=0; i<10; i++)
{
document.getElementById("year").options[i] = new Option(1990+i, 1990+i);
}

for (var i=1; i<=12; i++)
{
document.getElementById("month").options[i-1] = new Option(i, i);
document.getElementById("month").options[0].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 % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0));
if (isLeap && (month == 2))
{
for (var i=1; i<=29; i++)
{
document.getElementById("day").options[29] = null;
document.getElementById("day").options[30] = null;
document.getElementById("day").options[i-1] = new Option(i, i);
}
}
if (!isLeap && (month == 2))
{
for (var i=1; i<=28; i++)
{
document.getElementById("day").options[28] = null;
document.getElementById("day").options[29] = null;
document.getElementById("day").options[30] = null;
document.getElementById("day").options[i-1] = new Option(i, i);
}
}
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
{
for (var i=1; i<=31; i++)
{
document.getElementById("day").options[i-1] = new Option(i, i);
}
}
if (month == 4 || month == 6 || month == 9 || month == 11)    //判断是否为非2月
{
for (var i=1; i<=30; i++)
{
document.getElementById("day").options[30] = null;
document.getElementById("day").options[i-1] = 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>

原文地址：http://www.cnblogs.com/tzhz/archive/2013/04/27/3046301.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航