JSFiddle - React, Tailwind, and code Playground

by Pankaj Patel

HTML

<select id="month"></select>
<select id="date"></select>

JavaScript

(function(){
  var months = [
    {index: 1, name: 'january', days: 31 },
    {index: 2, name: 'february', days: 28 },
    {index: 3, name: 'march', days: 31 },
    {index: 4, name: 'april', days: 30 },
    {index: 5, name: 'may', days: 31 },
    {index: 6, name: 'june', days: 30 },
    {index: 7, name: 'july', days: 31 },
    {index: 8, name: 'august', days: 31 },
    {index: 9, name: 'september', days: 30 },
    {index: 10, name: 'october', days: 31 },
    {index: 11, name: 'november', days: 30 },
    {index: 12, name: 'december', days: 31 }
  ];
  var initDays = 31;
  var monthOptions = '<option value=0>Please Select Month</option>';
	for(var i = 0; i < months.length; i++){
  	monthOptions += '<option value="'+months[i].index+'">'
    			+months[i].name+'</option>';
  }
  $('#month').html(monthOptions);
  function addDateOptions(days, start){
  	console.log(days)
  	var dateOptions = '';
    for(var i = start; i < days+start; i++){
      dateOptions += '<option value="'+i+'">'
            +i+'</option>';
    }
    $('#date').append(dateOptions);
  }
  $(document).ready(function(){
  	addDateOptions(initDays, 1);
    //Events
    $('#month').on('change', function(){

      var month = $(this).val();
      var days = months[month-1].days;
      var action = '';
      var diff = $('#date').find('option').length - days;
      if( diff > 0 ){
        action = 'remove';
      } else if( diff < 0 ){
        action = 'add';
      }

      switch(action){
        case 'add': {
          addDateOptions(Math.abs(diff), diff+days+1);
          break;
        }
        case 'remove': {
          for( var i = diff+days; i > days; i--){
            $('#date option:nth-child('+i+')').remove();
          }
        }
      }
    })
  }) })()