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

javascript年月日三级联动下拉框

2017-08-14 19:29 429 查看

看了好几篇 js 年月日三级联动下拉框，没看到一个好的，不是太繁琐，就是太猥琐。还有就是闲得慌。

有这样的：

function (){
return Array(
[1...28],
[1...30],
[1...31]
)
}

简直了，这是要有多闲。

还有的写的很复杂，这很简单的东西，搞得那么复杂给谁看。我看半天愣是没看懂。

这是我写的一个年月日三级联动下拉框。

<!DOCTYPE html>
<html lang="en">
<body>
<select id="y" onchange="funy(this)"></select>
<select id="m" onchange="funm(this)"></select>
<select id="d"></select>
</body>
<script>
/*
在你的页面需要这三条html代码
<select id="y" onchange="funy(this)"></select>
<select id="m" onchange="funm(this)"></select>
<select id="d"></select>
*/
var y = document.getElementById('y');
var m = document.getElementById('m');
var d = document.getElementById('d');

var D = new Date();
var yy = D.getFullYear();               //年
var mm = parseInt(D.getMonth()) + 1;    //现在是8月，月份获取是7月。一脸懵逼！
var dd = D.getDate();                   //日
var oyy = 10 * (yy - 100).toString().substr(0,3);   //计算最小年 o = old
var marr = [1,3,5,7,8,10,12];           //列出31天的月份
var add;                                //初始化每月天数 a = all

starty();           //开始生成年下拉列表
startm();           //开始生成月下拉列表
startd(dd,mm,yy);   //开始生成日下拉列表

// 生成年下拉列表
function starty(){
// 初始化
var pyy = document.createElement('option');
pyy.innerText = '选择 年';
pyy.value = 0;
y.appendChild(pyy);

// 循环出所有年
for(i=yy;i>=oyy;i--){
pyy = document.createElement('option');
pyy.innerText = i + ' 年';
pyy.value = i;
y.appendChild(pyy);
}

93b8
}

// 生成月下拉列表
function startm(){
// 初始化
var pmm = document.createElement('option');
pmm.innerText = '选择 月';
pmm.value = 0;
m.appendChild(pmm);

// 判断是否选择了年
if(y.selectedOptions[0].value == 0) return;

// 循环出所有月
for(i=1;i<=12;i++){
pmm = document.createElement('option');
pmm.innerText = i + ' 月';
pmm.value = i;
m.appendChild(pmm);
}
}

function startd(mm,yy){
// 初始化
var pdd = document.createElement('option');
pdd.innerText = '选择 日';
pdd.value = 0;
d.appendChild(pdd);

// 判断是否选择了月
if(m.selectedOptions[0].value == 0) return;
var day = isadd(mm,yy);

// 循环出所有日
for(i=1;i<=day;i++){
pdd = document.createElement('option');
pdd.innerText = i + ' 日';
pdd.value = i;
d.appendChild(pdd);
}
}

// 判断并产生该月的天数
function isadd(mm,yy){
if(marr.indexOf(parseInt(mm)) != -1){
add = 31;
}
else{
add = 30;
if(mm == 2 && yy % 4 == 0){
add = 29;
}
else if(mm == 2 && yy % 4 != 0){
add = 28;
}
}
return add;
}

// 年份改变时调用
function funy(obj){
m.innerHTML = null;
d.innerHTML = null;
var yy = obj.selectedOptions[0].value;
startm();
startd(dd,mm,yy);
}

// 月份改变时调用
function funm(obj){
d.innerHTML = null;
var yy = y.selectedOptions[0].value;
var mm = obj.selectedOptions[0].value;
startd(mm,yy);
}
</script>
</html>

[2017年8月14日23:09:03] 删去部分无用代码

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

标签：

相关文章推荐

新的分享

章节导航