JSFiddle - React, Tailwind, and code Playground

by iammaddison143

HTML

<select id="month">
  <option disabled selected>Выберите месяц</option>
</select>
<select id="day"></select>

JavaScript

var data = {
	jan:{
		name: "Январь",
		value: "jan",
		max: 31
	},
	feb:{
		name: "Февраль",
		value: "feb",
		max: 28
	},
	mar:{
		name: "Март",
		value: "mar",
		max: 31
	},
	apr:{
		name: "Апрель",
		value: "apr",
		max: 30
	},
	may:{
		name: "Май",
		value: "may",
		max: 31
	},
	jun:{
		name: "Июнь",
		value: "jun",
		max: 30
	},
	jul:{
		name: "Июль",
		value: "jul",
		max: 31
	},
	aug:{
		name: "Август",
		value: "aug",
		max: 31
	},
	sep:{
		name: "Сентябрь",
		value: "sep",
		max: 30
	},
	oct:{
		name: "Октябрь",
		value: "oct",
		max: 31
	},
	nov:{
		name: "Ноябрь",
		value: "nov",
		max: 30
	},
	dec:{
		name: "Декабрь",
		value: "dec",
		max: 31
	}
};

selectMonth = $( '#month' );
selectDay = $( '#day' );

selectDay.css( 'visibility', 'hidden' )
$.each( data, function( index, value ) {
	console.log( value.name )
  
 	optionMonth = `<option value="${value.value}">${value.name}</option>`
  selectMonthTemp = selectMonth.html()
  
  selectMonth.html( selectMonthTemp + optionMonth )
})

selectMonth.on( 'change', function() {
	selectDay.css( 'visibility', 'visible' )
  selectedMonth = this.value
  maxTemp = data[`${selectedMonth}`]['max']
  
  selectDay.html( '' )
  for( i = 1; i <= maxTemp; i++) {
    optionDay = `<option value="${i}">${i}</option>`
  	
    selectDayTemp = selectDay.html()
    selectDay.html( selectDayTemp + optionDay )
  }
})