怎么在JavaScript中使用new Option()实现一个时间联动效果

tangjin

作者

本篇文章给大家分享的是有关怎么在JavaScript中使用new Option()实现一个时间联动效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

1、基础准备：

怎么在JavaScript中使用new Option()实现一个时间联动效果

　　先来了解下，如何运用js实现select动态添加option。

//1.动态创建select
functioncreateSelect(){
varmySelect=document.createElement("select");
mySelect.id="mySelect";
document.body.appendChild(mySelect);
}
//2.添加选项option
functionaddOption(){
//根据id查找对象，
varobj=document.getElementById('mySelect');
//添加一个选项
obj.add(newOption("文本","值"));//方法一：
obj.options.add(newOption("text","value"));//方法二：
for(vari=0;i<10;i++){
obj.options[i]=newOption("新文本","新值");//方法三：
}
}
//3.删除所有选项option
functionremoveAll(){
varobj=document.getElementById('mySelect');
obj.options.length=0;
}
//4.删除一个选项option
functionremoveOne(){
varobj=document.getElementById('mySelect');
varindex=obj.selectedIndex;//index,要删除选项的序号
obj.options.remove(index);
}
//5.获得选项option的值
varobj=document.getElementById('mySelect');
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
varval=obj.options[index].value;
//6.获得选项option的文本
varobj=document.getElementById('mySelect');
varindex=obj.selectedIndex;
varval=obj.options[index].text;
//7.修改选项option
varobj=document.getElementById('mySelect');
varindex=obj.selectedIndex;
varval=obj.options[index]=newOption("新文本","新值");
//8.删除select
functionremoveSelect(){
varmySelect=document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

2、时间联动实战

　　时间联动的要点就是天数随月份变化，考虑闰年，口诀：四年一闰，百年不闰，四百年再闰。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>日期和年份月份联动demo</title>
</head>
<body>
<selectid="year">
<optionvalue="">请选择年份</option>
</select>
<selectid="month">
<optionvalue="">请选择月份</option>
</select>
<selectid="day">
<optionvalue="">请选择日期</option>
</select>
<script>
varyear=document.getElementById("year");
varmonth=document.getElementById("month");
varday=document.getElementById("day");
vary=newDate().getFullYear();
//前后均有
for(i=(y-30);i<(y+30);i++){
year.options.add(newOption(i+"年",i));
//格式不要写错，不要写成add(newOption(i+"年"),i)。
}
//只写前或者后
//for(vari=y;i>1977;i--){
//year.options[y+1-i]=newOption(i+"年",i);//索引是options[],增加是newoption(text,value)
//}
for(i=1;i<13;i++){
month.options.add(newOption(i+"月",i));
}
vard=function(){
day.length=1;//初始化
if(year.value==""||month.value==""){
return;
}else{
varDays=[31,28,31,30,31,30,31,31,30,31,30,31];
if((year.value%4==0&&year.value%100!=0)||year.value%400==0){
Days[1]++;//判断为闰年，二月天数加一
}
for(i=1;i<=Days[month.value-1];i++){
day.options.add(newOption((i+"日"),i));
}
}
}
//刷新日期天数
year.onchange=function(){
d();
}
month.onchange=function(){
d();
}
</script>
</body>
</html>

以上就是怎么在JavaScript中使用new Option()实现一个时间联动效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-03-26 01:50:22

javascript