原生JS 年月日、省市区 三级联动

时间:2021-09-09 21:21:56

这个算生日日期,因为是从100年前的到现年。

<select id="sel_year"></select>
<select id="sel_month"></select>
<select id="sel_day"></select>
 function dateLinkage(yearId, monthId, dayId, defaultYear, defaultMonth, defaultDay) {
     var objYear = document.getElementById(yearId);
     var objMonth = document.getElementById(monthId);
     var objDay = document.getElementById(dayId);
     var MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
     var year1 = new Date().getFullYear(), year2 = '', year3 = '';
     var month1 = '', month2 = '', month3 = '';
     var day1 = '', day2 = '', day3 = '';

     //生成年
     for (var i = (year1 - 100) ; i < year1; i++) {
         year2 = i == defaultYear ? 'selected="selected"' : '';
         year3 += '<option value="' + i + '" ' + year2 + '>' + i + '</option>';
     }
     objYear.innerHTML = year3;

     //生成月
     for (var i = 1; i <= 12; i++) {
         month1 = i < 10 ? ("0" + i) : i;
         month2 = i == defaultMonth ? 'selected="selected"' : '';
         month3 += '<option value="' + month1 + '" ' + month2 + '>' + month1 + '</option>';
     }
     objMonth.innerHTML = month3;

     //生成日
     for (var i = 1; i <= 31; i++) {
         day1 = i < 10 ? ("0" + i) : i;
         day2 = i == defaultDay ? 'selected="selected"' : '';
         day3 += '<option value="' + day1 + '" ' + day2 + '>' + day1 + '</option>';
     }
     objDay.innerHTML = day3;

     //年份变化事件
     objYear.change(function () {
         var curm = parseInt(objMonth.val());
         var num = MonHead[curm - 1];
         if (IsLeapYear(this.value)) {
             num = 29;
         }
         day3 = '';
         for (var i = 1; i <= num; i++) {
             day1 = i < 10 ? ("0" + i) : i;
             day3 += '<option value="' + day1 + '">' + day1 + '</option>';
         }
         objDay.innerHTML = day3;
     });

     //月份变化事件
     objMonth.change(function () {
         var curm = parseInt(this.value);
         var num = MonHead[curm - 1];
         if (IsLeapYear(objYear.val()) && curm == 2) {
             num = 29;
         }
         day3 = '';
         for (var i = 1; i <= num; i++) {
             day1 = i < 10 ? ("0" + i) : i;
             day3 += '<option value="' + day1 + '">' + day1 + '</option>';
         }
         objDay.innerHTML = day3;
     });

     //判断是否是闰年
     function IsLeapYear(year) {
         return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
     }
 }

省市区联动,变量名没有好好想,随意了点。

<select id="sf"> </select>
<select id="cs"> </select>
<select id="qy"> </select>
 function liandong(sfid, csid, qyid, sfDefault, csDefault, qyDefault) {
     var sfbox = document.getElementById(sfid);
     var csbox = document.getElementById(csid);
     var qybox = document.getElementById(qyid);

     var sfinit = function () {
         var list = '';
         for (var i = 0; i < provinceList.length; i++) {
             var cursf = provinceList[i];
             var strSel = cursf.name == sfDefault ? ' selected="selected"' : '';
             list += '<option' + strSel + '>' + cursf.name + '</option>';
         }
         sfbox.innerHTML = list;
         csinit();
     };

     var csinit = function () {
         var list = '';
         var curcslist = provinceList[sfbox.selectedIndex].cityList;
         for (var i = 0; i < curcslist.length; i++) {
             var curcs = curcslist[i];
             var strSel = curcs.name == csDefault ? ' selected="selected"' : '';
             list += '<option' + strSel + '>' + curcs.name + '</option>';
         }
         csbox.innerHTML = list;
         qyinit();
     };

     var qyinit = function () {
         var list = '';
         var curqylist = provinceList[sfbox.selectedIndex].cityList[csbox.selectedIndex].areaList;
         for (var i = 0; i < curqylist.length; i++) {
             var curqy = curqylist[i];
             var strSel = curqy == qyDefault ? ' selected="selected"' : '';
             list += '<option' + strSel + '>' + curqy + '</option>';
         }
         qybox.innerHTML = list;
     };

     sfbox.onchange = function () {
         var list = '';
         var curcslist = provinceList[sfbox.selectedIndex].cityList;
         for (var i = 0; i < curcslist.length; i++) {
             var curcs = curcslist[i];
             list += '<option>' + curcs.name + '</option>';
         }
         csbox.innerHTML = list;
         cschange();
     };

     csbox.onchange = function () {
         cschange();
     };

     var cschange = function () {
         var list = '';
         var curqylist = provinceList[sfbox.selectedIndex].cityList[csbox.selectedIndex].areaList;
         for (var i = 0; i < curqylist.length; i++) {
             var curqy = curqylist[i];
             list += '<option>' + curqy + '</option>';
         }
         qybox.innerHTML = list;
     };

     sfinit();
 }

provinceList的结构:

原生JS 年月日、省市区 三级联动