微客导航 » 文章资讯 » JS中使用new Option()实现时间联动效果

JS中使用new Option()实现时间联动效果

2023-09-04 11:06:04 302

1、基础准备：

先来了解下，如何运用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、时间联动实战

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





日期和年份月份联动demo



请选择年份


请选择月份


请选择日期

总结

以上所述是小编给大家介绍的JS中使用newOption()实现时间联动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

JS中使用new Option()实现时间联动效果

热门推荐

随机推荐