onload in select dropdown javascript

Question

I have 3 dropdowns for year, month and day. The dropdown is working properly when I clicked a year, it loads a month and after I choose a month its loads the dates. The problem I encountered is when I choose the year, month and date. for example the date I choose is:

year --> 1990 month-->2 the dates are only 28 days. working properly.

but when I changed to a new year the month is become 1 and the dates still display 28 days it should display 31 days.

I am planning to include a onload in body tag or in select but not works at all. Any suggestions?

            function daysInMonth(m, y){
               return m===2?y&3||!(y%25)&&y&15?28:29:30+(m+(m>>3)&1);
            }

            var monthArray = []; 
            var dateArray = []; 
            function onYearChange() {
                monthArray =[];
                var year = document.getElementById("yeardialog").value
                    if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                        for(var i = 0; i < monthArray.length; i++) {
                            var monthOptions = monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
            		console.log(monthArray);
    			}   
    		}

            function onMonthChange(){	
                if(dateArray.length>12){
                    dateArray.splice(0, 12);
                }
                var dates =[]; 
                var month = document.getElementById("monthdialog").value;
                var endDay = dateArray[month.replace('', '')-1];

                for(var date = 1; date<=endDay; date++){
                    dates.push(date + '');
                }

                var select = document.getElementById("datedialog");
                select.innerHTML = "";

                for(var i = 0; i < dates.length; i++) {
                    var dateOptions = dates[i].replace('', '');
                    var el = document.createElement("option");
                        el.textContent = dateOptions + '';

                    if(dateOptions<10){
                        dateOptions = '0'+dateOptions
                    }
                    el.value = dateOptions;
                    select.appendChild(el);
                }
            }

<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

<select id="datedialog">
  <option></option>
</select>

I want to solve it today.

Like this?

Guruprasad J Rao
– Guruprasad J Rao

2015-07-22 04:09:25 +00:00
Commented Jul 22, 2015 at 4:09 — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 22, 2015 at 4:09
!! Same what others mentioned in answer.. Happy Coding.. :)

Guruprasad J Rao
– Guruprasad J Rao

2015-07-22 04:31:02 +00:00
Commented Jul 22, 2015 at 4:31 — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 22, 2015 at 4:31

Solutionswithus · Accepted Answer · 2015-07-22 04:04:22Z

1

Simply add the onMonthChange() after onYearChange() in year drop down. It will work.

answered Jul 22, 2015 at 4:04

Solutionswithus

1495 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saravanan Arunagiri · Accepted Answer · 2015-07-22 04:17:42Z

function daysInMonth(m, y){
               return m===2?y&3||!(y%25)&&y&15?28:29:30+(m+(m>>3)&1);
            }

            var monthArray = []; 
            var dateArray = []; 
            function onYearChange() {
                monthArray =[];
                var year = document.getElementById("yeardialog").value
                    if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                        for(var i = 0; i < monthArray.length; i++) {
                            var monthOptions = monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
                      onMonthChange();
            		console.log(monthArray);
    			}   
    		}

            function onMonthChange(){	
                if(dateArray.length>12){
                    dateArray.splice(0, 12);
                }
                var dates =[]; 
                var month = document.getElementById("monthdialog").value;
                var endDay = dateArray[month.replace('', '')-1];

                for(var date = 1; date<=endDay; date++){
                    dates.push(date + '');
                }

                var select = document.getElementById("datedialog");
                select.innerHTML = "";

                for(var i = 0; i < dates.length; i++) {
                    var dateOptions = dates[i].replace('', '');
                    var el = document.createElement("option");
                        el.textContent = dateOptions + '';

                    if(dateOptions<10){
                        dateOptions = '0'+dateOptions
                    }
                    el.value = dateOptions;
                    select.appendChild(el);
                }
            }

<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

<select id="datedialog">
  <option></option>
</select>

Rashedul.Rubel · Accepted Answer · 2015-07-22 05:58:23Z

 function onYearChange() {

            monthArray =[];
            var year = document.getElementById("yeardialog").value
            if (document.getElementById("yeardialog").value != "0"){
                        for(var i = 1 ; i<=12; i++){
                        monthArray.push(i + '');
                        dateArray.push(daysInMonth(i, year));
                    }

                var select = document.getElementById("monthdialog");
                    select.innerHTML = "";
                for(var i = 0; i < monthArray.length; i++) {
                 var monthOptions =monthArray[i].replace('', '');
                            var el = document.createElement("option");
                                el.textContent = monthOptions + '';

                            if(monthOptions<10){
                                monthOptions = '0'+monthOptions
                            }
                                el.value = monthOptions;
                                select.appendChild(el);
                        }
                    console.log(monthArray);
                }
                onMonthChange();
            }

call `onMonthChange();` function inside `onYearChange();`

because date will be loaded on month change. since year change does not trigger month change event that's why date dropdown was not loading.

Collectives™ on Stack Overflow

onload in select dropdown javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related