JSFiddle - React, Tailwind, and code Playground

by rubens junior

HTML

<div class="form-group">
        <label>* Região:</label>
        <select class="form-control2" name="regiao" id="regiao">
          <option>Selecione a Data</option>
        </select>

      </div>
      <div class="form-group">
        <label>* Profissional:</label>
        <select class="form-control2" name="profissional" id="profissional">
          <option>Selecione uma região</option>
        </select>
</div>

      <div class="form-group">
        <label>Tipo de Exame Complementar:</label>
        <label class="checkbox"></label>
        <input type="checkbox" id="inlineCheckbox1" value="option1" name="option1"> Clínico
        <input type="checkbox" id="inlineCheckbox1" value="option2" name="option2"> Dermatoligia
        <input type="checkbox" id="inlineCheckbox1" value="option3" name="option3"> Odontologia
     
      </div>
            
          <div class="form-group">
        <label>* Horários Disponíveis:</label>
        <select class="form-control2" name="horarios" id="horarios">
          <option>Selecione um profissional</option>
        </select>
              
      </div>

JavaScript

$(document).ready(function(){
	
	//região que popula dados em profissional
	 $('#regiao').bind('change', function(){
		  $.ajax({
			 type: "POST",
			 url: "teste2.php",
			 data: {regiao: $("#regiao").val()},
			 dataType: "json",
			 success: function(json){
				var options = "";
				$.each(json, function(key, value){
				   options += '<option value="' + key + '">' + value + '</option>';
				});
				$("#profissional").html(options);
			 }
		  });
	   });
	   
        	
	$('#profissional').bind('change', function(){
      $.ajax({
         type: "POST",
         url: "teste3.php",
         data: {profissional: $("#profissional").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#horarios").html(options);
         }
      });
   });
        
	   
	  // profissional e checkbox populando horário
	  
	  $('#inlineCheckbox1').on('click', function() {
      $.ajax({
         type: "POST",
         url: "teste4.php",
         data: {regiao: $("#regiao").val(),
					profissional: $("#profissional").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#horarios").html(options);
         }
      });
   }); 
	   

	   	
	});