1.完整的代码见下面的更新，学习过程记录——网页实现三级联动 年月日的列表框
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript"src="index.js"></script>
</head>
<body onload="ymd()">
<form>
<select name="yyyy" id="yyyy"></select>年
<select name="mm" id="mm"></select>月
<select name="dd" id="dd"></select>日
</form>
</body>
</html>function ymd(){
//获取id=yyyy的控件
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var date=new Date();
var year=parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
}
/*给列表框赋值，传递三个参数：表单元素，开始值，结束值*/
function initSelect(obj,start,end){
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}这是固定的实现年月日 接下来更新
1.年份显示中间的框，
2.随着月份的改变 日也会随之天数改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="ymd()">
<form>
<select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
<select name="mm" id="mm" onchange="selectYmd()"></select>月
<select name="dd" id="dd"></select>日
</form>
</body>
</html>function ymd(){
//获取id=yyyy的控件
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var date=new Date();
var year=parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
// 获取列表框的长度
var n=yyyy.length;
// 列表框选中某一个条目
yyyy.selectedIndex=Math.round(n/2);
// 将某个列表框的条目数设置为零，效果是删除
// dd.options.length=0;
}
/*给列表框赋值，传递三个参数：表单元素，开始值，结束值*/
function initSelect(obj,start,end){
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
function selectYmd(){
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var m=parseInt(mm.value);
var dayEnd;
if(m==4 || m==6 || m==9 || m==11){
dayEnd=30;
}else if(m==2){
dayEnd=28;
y=parseInt(yyyy.value);
if((y % 4==0 && y % 100 !=0) || y % 400 ==0){
dayEnd=29;
}
}else{
dayEnd=31;
}
dd.options.length=0;
initSelect(dd,1,dayEnd);
}删除列表框的某一个元素
// 删除列表框的某一个条目。即：按索引号删除
function deleteSelect(){
var dd=document.getElementById("dd");
//dd.options.remove(1);
for(i=dd.length;i>=0;i--){
dd.options.remove(0);
}
}2.图片和列表框并列处理，实现选择列表框的数字，则会更改成相应的图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="initLogo()">
<form>
<img id="logoImg" src="image/headLogo/1.gif">
<select id="logo" onchange="selectLogo()"></select>
</form>
</body>
</html>function initLogo(){
var logo=document.getElementById("logo");
for(i=1;i<=15;i++){
logo.options.add(new Option(i,i));
}
}
function selectLogo(){
var logo=document.getElementById("logo");
var n=logo.value;
var logoImg=document.getElementById("logoImg");
logoImg.src="image/headLogo/"+n+".gif";
}3.对复选框进行设置
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="interest" value="1"/><label>游泳</label>
<input type="checkbox" name="interest" value="2"/><label>爬山</label>
<input type="checkbox" name="interest" value="3"/><label>看书</label>
<input type="checkbox" name="interest" value="4"/><label>听歌</label>
<input type="button" id="btn1" value="全选" onclick="checkInterest()">
<input type="button" value="反选" onclick="checkInterest1()">
</form>
</body>
</html>var flag=true;
function checkInterest(){
var interest=document.getElementsByName("interest");
for(i=0;i<interest.length;i++){
interest[i].checked=flag;
}
if(flag){
document.getElementById("btn1").value="全不选";
}else{
document.getElementById("btn1").value="全选";
}
flag=!flag;//开关变量
}
function checkInterest1(){
var interest=document.getElementsByName("interest");
for(i=0;i<interest.length;i++){
interest[i].checked=!interest[i].checked;
console.log(interest[i].value);
}
}