Build a month/day dropdown selector, not a plugin

Question

I have a form, and I would like the user to enter their birth month and birth day. However, I can't find a way to build a month and day dropdown selector using jquery. Everything I read is about a plugin, but I cannot use a plugin. Below is the basic html structure, with the "day" select field being dynamically populated, based on what month the user selected.

  <select id="month" onchange="selectMonth(this.options[this.selectedIndex].value)" name="month">
       <option value=""></option>
       <option value="January">January</option>
       <option value="February">February</option>
       <option value="March">March</option>
       <option value="April">April</option>
       <option value="May">May</option>
       <option value="June">June</option>
       <option value="July">July</option>
       <option value="August">August</option>
       <option value="September">September</option>
       <option value="October">October</option>
       <option value="November">November</option>
       <option value="December">December</option>
     </select>

<select id="day"></select>

I have created this fiddle to give you an idea of what I am trying to do. Unfortunately, this fiddle isn't working (it was the only tutorial I could find to build this, and it didn't work). https://jsfiddle.net/katherinekonn/hLc8r915/28/

Can someone please explain how I would go about creating this? It is important that based on what month the user selects, the correct number of days will show (for example, is user selects feb, then 29 days will show).

You can make use of this [method](https://stackoverflow.com/a/1184359/4891892) to get the number of days in a month, instead of hard coding into your code. — Pavan Kumar Jorrigala, Aug 30 '18 at 04:52

score 0 · Answer 1 · answered Aug 30 '18 at 02:48

To declare a js function, you may try const selectMonth = month => {} instead of var selectMonth(month){}.
By looking at your js function, option values should be number instead of the name of the month.
To clear all options in the drop down list, you may try dateSelect.innerHTML = "" instead of dateSelect.options.length = 0, which dateSelect.options.length is read only.
To append options in the drop down list, you may try dateSelect.appendChild(new Option(dayNum, dayNum)) instead of dateSelect.options[dateSelect.options.legnth] = new Option(date[month - 1][i], i)

You may take a look on my solution: https://jsfiddle.net/ymkasf6c/

Build a month/day dropdown selector, not a plugin

1 Answers1