How to stop the days in appending after I select the month

Question

To make the issue short. I have 3 dropdowns for picking a date. The date picker display the range of the days within the month if it's only 29 or 31 days. It's working fine now except that when I changed in different month the value in my days is repeating.

For example I choose February. The days that is display is 28 days. Then I changed to March. The days displays as 31 days. The problem is they are only combining so the value in my day dropdown become many. How can I fixed this, any help?

function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}
function onMonthChange(){
    var year = document.getElementById("yeardialog").value;
    var month = document.getElementById("monthdialog").value;
 
    var endOfTheMonth = daysInMonth(month, year);
    console.log(endOfTheMonth);
  
    var select = document.getElementById('datedialog');
    for (var i = 0; i < endOfTheMonth; i++) {
        select.options[select.options.length] = new Option(i + 1, i);
    } 
}

<select id="yeardialog" name="yeardialog">
    <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 value="">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

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

have you considered http://www.w3.org/TR/html-markup/input.date.html — Isaac, Jul 29 '15 at 10:58

Mouser · Accepted Answer · 2015-07-29T11:22:18.187

var select = document.getElementById('datedialog');
select.innerHTML = ""; // clear the select.
for (var i = 0; i < endOfTheMonth; i++) {
    select.options[select.options.length] = new Option(i + 1, i);
}

The solution is plain and simple. Delete the contents of the select before populating them.

Solution inside the snippet:

function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}
function onMonthChange(){
    var year = document.getElementById("yeardialog").value;
    var month = document.getElementById("monthdialog").value;
 
    var endOfTheMonth = daysInMonth(month, year);
    console.log(endOfTheMonth);

    var select = document.getElementById('datedialog');
    var selectedvalue = select.querySelector('option:checked');
    if (selectedvalue)
    {
      var store = selectedvalue.getAttribute("value");
    }
    select.innerHTML = "";
    for (var i = 0; i < endOfTheMonth; i++) {
        select.options[select.options.length] = new Option(i + 1, i);
    } 
    var retrieved = select.querySelector("option[value='"+store+"']");
    if (retrieved)
    {
      retrieved.setAttribute("selected", "true");
    }
}

<select id="yeardialog" name="yeardialog">
    <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 value="">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

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

Updated question. Store the original value before deleting:

We look for the selected value using:

select.querySelector('option:checked');

Then we look if the value can be found in the new list. If so select the value. If not revert to 1. This happens when you select 31 and the month loaded only has 30 days.

yeah I already tried that before to clear the select but it's resets the value in 1. For e.g I already choose a day(26) then when I choose another month the day i choose is reset — QWERTY, Jul 29 '15 at 11:04
ahm I think it is still resetting the value. I choose the day 27 then I changed to another month. The day I selected is reset to 1. I want to stay at 27. :-( — QWERTY, Jul 29 '15 at 11:16
It's working now. I clear all the cache and history in my browser :-) . Thank u very much for your kindness — QWERTY, Jul 29 '15 at 11:21

score 1 · Answer 2 · answered Jul 29 '15 at 11:06

1

I wouldn't modify the innerHTML, I prefer removing the nodes

var select = document.getElementById('datedialog');

while(select.hasChildNodes())select.removeChild(select.firstChild);// clear the select.
for (var i = 0; i < endOfTheMonth; i++) {
    select.options.add(new Option(i + 1, i));
}

answered Jul 29 '15 at 11:06

Isaac

11,409
5
33
45

Nice but unfortunetly there are two loops in that solution. – Tomasz Jul 29 '15 at 11:08
@Tomasz http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript – Isaac Jul 29 '15 at 11:11
You're right. I've just tested that. Upvote from me. :-) – Tomasz Jul 29 '15 at 13:44

score 0 · Answer 3 · answered Jul 29 '15 at 11:05

Try this:

function onMonthChange(){
 var year = document.getElementById("yeardialog").value;
 var month = document.getElementById("monthdialog").value;

 var endOfTheMonth = daysInMonth(month, year);
 console.log(endOfTheMonth);

 var select = document.getElementById('datedialog');
 select.innerHTML = '';
 select.options[0] = new Option("Pick a date", 0);
 for (var i = 1; i < endOfTheMonth; i++) {
  select.options[select.options.length] = new Option(i + 1, i);
 }
}

How to stop the days in appending after I select the month

3 Answers3