Ytukyg

const month = document.getElementById('month');

const year = document.getElementById('year');



function handleChange() {

  if (month.value && year.value) {

    const urlSearch = new URLSearchParams();

    urlSearch.append('month', month.value);

    urlSearch.append('year', year.value);

    console.log(urlSearch.toString());

  }

}

<select onchange="handleChange()" name="month" id="month">

  <option value="">Choice month</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

  <option value="5">5</option>

  <option value="6">6</option>

  <option value="7">7</option>

  <option value="8">8</option>

  <option value="9">9</option>

  <option value="10">10</option>

  <option value="11">11</option>

  <option value="12">12</option>

</select>

<select onchange="handleChange()" name="year" id="year">

  <option value="">Choice year</option>

  <option value="2001">2001</option>

  <option value="2002">2002</option>

  <option value="2003">2003</option>

  <option value="2004">2004</option>

  <option value="2005">2005</option>

  <option value="2006">2006</option>

  <option value="2007">2007</option>

  <option value="2008">2008</option>

  <option value="2009">2009</option>

  <option value="2010">2010</option>

  <option value="2011">2011</option>

  <option value="2012">2012</option>

</select>

monthEnd = function(year, month) {

 

	   date = new Date(year, month - 1, 1);

  

     var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

	   return lastDay.getDate();

     }



     appendHidden = function(formId, name, value) {

	$('#' + formId).append('<input type="text" name="' + name + '" class="hidden" value="' + value + '" />');

     }



     begining = function() {

	year = $('#selectYear').val();

	month = $('#selectMonth').val();	

	

	return year + '-' + month + '-' + '1'

     }



     end = function() {

        year = $('#selectYear').val();

	month = $('#selectMonth').val();

	

	return year + '-' + month + '-' + monthEnd(parseInt(year), parseInt(month));

     }



     $( document ).ready(function() {

	months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];



	for(i=0; i< months.length; i++) {

		$('#selectMonth').append('<option value="' + (i + 1) + '">' + months[i] + '</option>');

	}





	for(y=2000; y<= 2023;y++) {

		$('#selectYear').append('<option value="' + y + '">' + y + '</option>');

	}





	$('#selectMonth').on('change', function() {

	   appendHidden('form', 'courses', 'on');

           appendHidden('form', 'events', 'on');

	   appendHidden('form', 'date-from', begining());

	   appendHidden('form', 'date-from', end());

           $('#selectYear').remove();

	   $('#selectMonth').remove();

	   //$('#form').submit(); Uncomment this line to submit and refresh

     alert($('#form').serialize())

	});







});

.hidden {

	display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form" action="" method="GET">

	  <div id="custom-select1" class="custom-select" style="width:200px;" >

	      <select id="selectMonth" name="month" >       

	      </select>

	  </div>

	  <div class="custom-select" style="width:200px;">

	       <select id="selectYear" name="year" ></select>

	  </div>

</form>