构建月/日下拉选择器，而不是插件

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).

Answer 1

1. To declare a js function, you may try const selectMonth = month => {} instead of var selectMonth(month){} .
2. By looking at your js function, option values should be number instead of the name of the month.
3. 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.
4. 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/