Popular select based on a json date

Question

I have a bootstrap and validated form right, but I need that when selecting a date on the datepicker, it automatically loads a select with JSON, and has 3 more selects need to be filled after this, and all dependent on each other, ex:

I chose the date 17/05/2015, it opens an information on select below, which opens other information after selected, and so on.

By default of backend need to do in JSON and Ajax.

Can someone help me with this or show me the best way to do it?

Fiddle: http://jsfiddle.net/rubensoul/2671hn9n

my html code is like this:

        <script type="text/javascript">

          /** O dia que gostaria de desabilitar no calendário */
          var disableddates = ["5-6-2015", "7-7-2015", "8-8-2015", "13-7-2015"];

          function DisableSpecificDates(date) {


            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            // Formato da desabilitada dd-mm-yyyy 

            var currentdate =  d + '-' + (m + 1) + '-' + y ;

            // Vamos agora verificar se a data pertence a disableddates matriz
            for (var i = 0; i < disableddates.length; i++) {

              // Agora, verifique quais datas existem na matriz datas e ativa no calendário. 
              if ($.inArray(currentdate, disableddates) != -1 ) {
                  return [true];
              } else {
                  return [false];
              }

            }

            // No caso de a data não está presente na matriz deficientes , vamos agora verificar se é um fim de semana .
            // com a função noWeekends
            var weekenddate = $.datepicker.noWeekends(date);
            return weekenddate; 

          }


          $(function() {
            $( "#calendario" ).datepicker({
              beforeShowDay: DisableSpecificDates,
              minDate: 0,
              dateFormat: 'dd/mm/yy',
              //validação da data caso preenchimento errado ou vázio
              onSelect: function (calendario, inst) {
                $('#calendario').text(this.value);
                $('#defaultForm').bootstrapValidator('revalidateField', 'calendario');
              },
              // tradução do calendário
              dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
              dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
              dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
              monthNames: [  'Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
              monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
              nextText: 'Próximo',
              prevText: 'Anterior'
            });
          });

$(document).ready(function(){
   $("#calendario").select(function(){
      $.ajax({
         type: "POST",
         url: "teste.php",
         data: {calendario: $("#calendario").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#regiao").html(options);
         }
      });
   });
});

        </script> 
        
        <script>
 $('#regiao').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);
         }
      });
   });


        </script> 

    <form id="defaultForm" action="lista-atendimento.html" method="POST">
      <div class="form-group">
        <label control-label>* Data da consulta:</label>
        <input id="calendario" type="text" class="date-picker form-control2" name="calendario" placeholder="Data da consulta" />
        <label for="calendario" class="input-group-addon2 btn" style="margin: -3px 0 0 -4px;"><span class="glyphicon glyphicon-calendar"></span> </label>

      </div>
      <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">
          <option>Selecione uma região</option>
        </select>
      </div>
      <div class="form-group">
        <label>* Horários Disponíveis:</label>
        <select class="form-control2" name="horarios">
          <option>17:00</option>
          <option>18:00</option>
        </select>
      </div>

in my php json is like this:

<?php echo json_encode(array(
// id e nome
'0'=>'Selecione Região',
'1'=>'Barueri',
'2'=>'Paulista')); 


?>

I have a php file with json data, first I need that when clicking on the date it loads the json data to the first field (region) based on the date information, and when clicking on region, populate the professional file, and then populate the time

Answer 1

in your fiddle has a part of javascript:

$(document).ready(function(){ // linha 61 no fiddle
  $("#calendario").select(function(){
    // seu código iniciado por $.ajax({
  }
}

In this section is added the function to execute when the date is selected, but this function should be placed in the option onSelect of datepicker.

The function shall be placed on:

$( "#calendario" ).datepicker({ // linha 40 no fiddle
  // opções do .datepicker
  onSelect: function(){
    // seu código $.ajax()
  }
});

The function already exists, so you need to merge the content. The call $('#calendario').text(this.value); is not necessary, we may need to verify the return of .bootstrapValidator() before executing the AJAX.

To modify other fields when one <select> the event shall be used onChange. Personally, I recommend using .bind() to assign events:

$('#regiao').bind('change', function(){
// $('#regiao').change(function(){ // também funcionará
  // incluir AJAX igual da sua função anterior
})