Como popular select com 2 paramêtros json

Question

Eu estou fazendo um formulário, e não encontrei nada parecido nas pesquisas que fiz.

Eu tenho o código http://jsfiddle.net/rubensoul/xdmz35oy/3/ estou conseguindo popular eles normalmente,

Ao selecionar uma data ele popula a região, ao popular a região popula um profissional, e ao popular o profissional, ele popula o horário.

No entanto, preciso que selecionar um checkbox de 'tipo de exame complementar', ele traga informação do JSON de profissional e também de checkbox para o select de horário. O que eu preciso é criar uma array que tenha os dois ids, tanto profissional quanto checkbox, em horário.

eu preciso então, que os 2 parametros (profissional e (tipo de exame) fossem enviados para a mesma array, e voltasse para o select (horarios) estou usando um switch case de json

Tenho que passar o parâmetro de checkbox e ele interagir com o array de profissional, e atualizar o horario, é basicamente isso

 <?php 

 header('Content-type: text/json'); $retorno = array();

 switch($_POST['profissional']) {    case '21': // 
       $retorno = array(         0 => "Selecione um horário",  
         41 => "18h30",

       );
       break;    case '24': // 
       $retorno = array(         0 => "Selecione um horário",  
          42 => "18h50",

       );
       break;

    case '27': // 
       $retorno = array(         0 => "Selecione um horário",   
          43 => "20h30",

       );
       break;    case '30': // 
       $retorno = array(         0 => "Selecione um horário",   
          44 => "20h00",

       );
       break;
         case '33': // 
       $retorno = array(         0 => "Selecione um horário",     
          45 => "22h45",

       );
       break;

             case '35': // 
       $retorno = array(         0 => "Selecione um horário",   
          46 => "22h00",

       );
       break; }


 echo json_encode($retorno);

 ?>

// chamada para checkbox

<?php 

header('Content-type: text/json');
$retorno = array();

switch($_POST['inlineCheckbox1'])
{
   case 'option1': // regiao 1
      $retorno = array(
         0 => "Selecione um horário (checkbox)",  
         91 => "18h30",
         95 => "19h30",

      );
      break;
   case 'option2': // regiao 2
      $retorno = array(
         0 => "Selecione um horário (checkbox)",  
         92 => "18h50",
         99 => "22h50",


      );
      break;

   case 'option3': // regiao 2
      $retorno = array(
         0 => "Selecione um horário (checkbox)",   
         93 => "20h30",
         97 => "22h30",

      );
      break;

}


echo json_encode($retorno);

?>

Como posso fazer essa mudança no array para receber os 2 paramêtros?

Será que alguém pode me ajudar? Desde já agradeço.

Answer 1

Para enviar para o javascript usando mais de um valor use:

data: {regiao: $("#regiao").val(),
profissional: $("#profissional").val()}

O javascript enviará então os dois valores ao mesmo tempo para a página solicitada. Não é possível utilizar ajax para enviar para duas páginas ao mesmo tempo.

Recomendo também utilizar apenas um $(document).ready() e colocar todos os conteúdos unidos, assim código ficaria mais legível também:

$(document).ready(function(){
$('#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);
     }
   });
 });
// AQUI É O CHECKBOX

$('#inlineCheckbox1').on('click', function() {
  $.ajax({
     type: "POST",
     url: "teste4.php",
     data: {inlineCheckbox1: $("#inlineCheckbox1").val()},
     dataType: "json",
     success: function(json){
        var options = "";
        $.each(json, function(key, value){
           options += '<option value="' + key + '">' + value + '</option>';
        });
        $("#horarios").html(options);
     }
  });
});

// AQUI É O PROFISSIONAL

 $('#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);
     }
     });
   });
});

Resposta ao comentário:

Sim, vc pode interceptar no javascript os valores selecionados antes de enviar para o ajax de várias maneiras. Um truque que vc pode usar é modificar a tag name de todas as checkboxes para option e os valores delas para 1 e 2 e 3. modifique o id delas para clin, derm e odont. Assim você pode enviar apenas o seguinte para o jquery:

data: {regiao: $("#regiao").val(),
    profissional: $("#profissional").val(),
    tipo: [ $("#clin").val(), $("#derm ").val(), $("#odont").val()]
}

Aí você precisará desmembrar o tipo no php através de split.

ou

data: {regiao: $("#regiao").val(),
    profissional: $("#profissional").val(),
    clin: $("#clin")[0].checked?$("#clin").val():'',
    derm: $("#derm")[0].checked?$("#derm").val():'',
    odont: $("#odont")[0].checked?$("#odont").val():''
 }

Aí você terá uma variável para cada checkbox