Dificuldade do php pegar texto do select alimentado com javascript e json

29/10/2019

0

O código javascript abaixo, preenche as opções do select "regioes" (id) do arquivo json "lista-regiao-programas-municipio".
Mas no form html este preenche o value com valor do ID no json. E se mudar não funciona o select.

HtmlOption += '<option value="' + select.id + '">' + select.name + '</option>';

Obs.: código completo do js mais embaixo

Como faço para o php pegar o texto?

Form html
<div class="form-group" role="select">
     <label for="regioes">Região de integração</label>
     <select name="regioes" id="regioes">
         <option value="">Selecione a regição</option>
      </select>
 </div>

<div class="form-group" role="selecet">
       <!-- selecionar o programa -->
       <label for="programas">Programa desenvolvido</label>
       <select name="programas" id="programas">
          <option value="">Selecione o programa</option>
       </select>
</div> 


Arquivo: alimentar-combos-regiao-programas-municipio.js
function get_json_data(id, parent_id) {
  var HtmlOption = '';

  $.getJSON('SIGPLAM4/javaScript/lista-regiao-programas-municipio.json', function(data){
    ListSelect = id;  // ID do select regioes do form html
    HtmlOption += '<option value="">Selecione a ' + ListSelect + '</option>';
    
    // alimenta o objeto select usando each e, uma função anônima de callback (índice do objeto e o objeto)
    $.each(data, function(key, select) {
      if(select.parent_id == parent_id) {
        HtmlOption += '<option value="' + select.id + '">' + select.name + '</option>';
      }
    });
    $('#' + id).html(HtmlOption); // envia as opções do select do arquivo json ao form html
  });
}
get_json_data('regioes', 0);

$(document).on('change', '#regioes', function(){  // quando uma opção é selecionada no select regioes, alimenta os outros selects do form
  var regioes_id = $(this).val();

  if (regioes_id != ''){
    get_json_data('programas', regioes_id);
    get_json_data('municipio', category_id);
    get_json_data('municipioSuas', category_id);
    get_json_data('municipioVig', category_id);
  } else {
    $('#programas').html('<option value="">Selecione o programa</option>');
  }
});

$(document).on('change', '#programas', function(){
  var category_id = $(this).val();
  if (category_id != '') {
    get_json_data('municipio', category_id);
    get_json_data('municipioSuas', category_id);
    get_json_data('municipioVig', category_id);
  } else {
    $('#municipio').html('<option value="">Selecione o municipio</option>');
    $('#municipioSuas').html('<option value="">Selecione o municipio SUAS</option>');
    $('#municipioVig').html('<option value="">Selecione o municipio VIG</option>');
  }
});


Arquivo lista-regiao-programas-municipio.json
[
   {
      "id":"1",
      "name":"Araguaia",
      "parent_id":"0"
   },
   {
      "id":"2",
      "name":"Baixo Amazonas",
      "value":"Baixo Amazonas",
      "parent_id":"0"
   },
   {
      "id":"3",
      "name":"Carajás",
      "parent_id":"0"
   },
   

   {
      "id":"4",
      "name":"Programa 1",
      "parent_id":"1"
   },
   {
      "id":"5",
      "name":"Programa 2",
      "parent_id":"1"
   },
   {
      "id":"6",
      "name":"Programa 3",
      "parent_id":"1"
   },
   
   
   {
      "id":"7",
      "name":"Agua Azul do Norte",
      "parent_id":"4"
   },
   {
      "id":"8",
      "name":"Bannach",
      "parent_id":"4"
   },
   {
      "id":"9",
      "name":"Conceição do Araguaia",
      "parent_id":"4"
   },
   
   
   {
      "id":"10",
      "name":"Agua Azul do Norte",
      "parent_id":"5"
   },
   {
      "id":"11",
      "name":"Bannach",
      "parent_id":"5"
   },
   {
      "id":"12",
      "name":"Conceição do Araguaia",
      "parent_id":"5"
   }
]


Um simples PHP
if (isset($_POST['regioes']) ? $_POST['regioes'] : null){
Liclopes

Liclopes

Responder

Posts

30/10/2019

Alex William

Olá amigo, tudo bem?

Bom, primeiro acredito que voce tenha que mudar:
'<option value="' + select.id + '">' + select.name + '</option>';


por:
'<option value="' + select.value + '">' + select.name + '</option>';


E em segundo, no seu JSON, somente 1 valor(Baixo Amazonas) tem atributo value, quando o JS tentar buscar esse valor em um "nó" do JSON que não tem esse atributo, ele retornara erro de referencia nula, deixe seu JSON assim:
[
   {
      "id":"1",
      "name":"Araguaia",
      "value":"",
      "parent_id":"0"
   },
   {
      "id":"2",
      "name":"Baixo Amazonas",
      "value":"Baixo Amazonas",
      "parent_id":"0"
   },
   {
      "id":"3",
      "name":"Carajás",
      "value":"",
      "parent_id":"0"
   },
    
 
   {
      "id":"4",
      "name":"Programa 1",
      "value":"",
      "parent_id":"1"
   },
   {
      "id":"5",
      "name":"Programa 2",
      "value":"",
      "parent_id":"1"
   },
   {
      "id":"6",
      "name":"Programa 3",
      "value":"",
      "parent_id":"1"
   },
    
    
   {
      "id":"7",
      "name":"Agua Azul do Norte",
      "value":"",
      "parent_id":"4"
   },
   {
      "id":"8",
      "name":"Bannach",
      "value":"",
      "parent_id":"4"
   },
   {
      "id":"9",
      "name":"Conceição do Araguaia",
      "value":"",
      "parent_id":"4"
   },
    
    
   {
      "id":"10",
      "name":"Agua Azul do Norte",
      "value":"",
      "parent_id":"5"
   },
   {
      "id":"11",
      "name":"Bannach",
      "value":"",
      "parent_id":"5"
   },
   {
      "id":"12",
      "name":"Conceição do Araguaia",
      "value":"",
      "parent_id":"5"
   }
]


Verifique se dessa forma funciona.

Espero ter ajudado. :D
Responder

30/10/2019

Liclopes


Bom, primeiro acredito que voce tenha que mudar:
'<option value="' + select.id + '">' + select.name + '</option>';


por:
'<option value="' + select.value + '">' + select.name + '</option>';



Já tentei fazer isso, retirando o "select.id" da erro... onde o select "programas" não é alimentado, as opções do arquivo json não aparecem.

E se mudar não funciona o select.


[code=js]
$(document).on('change', '#regioes', function(){ // quando uma opção é selecionada no select regioes, alimenta os outros selects do form
var regioes_id = $(this).val();

if (regioes_id != ''){
get_json_data('programas', regioes_id);
get_json_data('municipio', category_id);
get_json_data('municipioSuas', category_id);
get_json_data('municipioVig', category_id);
} else {
$('#programas').html('<option value="">Selecione o programa</option>');
}
});
[/code=js]
Responder

30/10/2019

Liclopes

Bom, primeiro acredito que voce tenha que mudar:
'<option value="' + select.id + '">' + select.name + '</option>';


por:
'<option value="' + select.value + '">' + select.name + '</option>';


Já tentei fazer isso, retirando o "select.id" da erro no javascript e no selet "programas".
O php salva corretamente o value do select "regioes" (texto "Araguaia"), mas os dados do select "programas" não aparecem que estão no json.

Responder

14/11/2019

Liclopes

Consegui a solução unindo dois procedimentos (getjson + método barroco switch case)

Ao escolher no select "regioes" alimenta o select "programas" com getjson:

$(document).ready(function(){
   $.getJSON('SIGPLAM4/javaScript/lista-regiao-programas.json', function(data){
	  var items = [];
	  var options = '<option value="">escolha um estado</option>';
	  $.each(data, function(key, val){
		 options += '<option value="' + val.nome + '">' + val.nome + '</option>';
	  });
   	  $("#regioes").html(options);

      $("#regioes").change(function(){
         var options_cidades = '';
	     var str = "";

         $("#regioes option:selected").each(function(){
		   str += $(this).text();
         });

	     $.each(data, function(key, val){
		    if(val.nome == str){
			   $.each(val.cidades, function (key_city, val_city){
			  	  options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
			   });
		    }
	     });
	  
	     $("#programas").html(options_cidades);
      }).change();
   });
});


Também ao escolher no select "regioes" alimenta o select "municipio" com switch case arcaico:
function dynamicdropdown(listindex)
{
  switch (listindex)
  {
  case "Araguaia" :
    document.getElementById("municipio").options[0]=new Option("Selecione o município","");
    document.getElementById("municipio").options[1]=new Option("Conceição do Araguaia","Conceição do Araguaia");
    document.getElementById("municipio").options[2]=new Option("Floresta do Araguaia","Floresta do Araguaia");
    document.getElementById("municipio").options[3]=new Option("Santa Maria das Barreiras","Santa Maria das Barreiras");
    document.getElementById("municipio").options[4]=new Option("Santana do Araguaia","Santana do Araguaia");
    break;
  case "Baixo Amazonas" :
    document.getElementById("municipio").options[0]=new Option("Selecione o município","");
    document.getElementById("municipio").options[1]=new Option("Município 1","Município 1");
    document.getElementById("municipio").options[2]=new Option("Município 2","Município 2");
    break;
  }
  return true;
}


O form select html:
<label for="regioes">Região de integração</label>
<select name="regioes" id="regioes" class="form-control" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
      <option value="">Selecione a regição</option>
</select>
<label for="municipio">Município de atuação</label>
<select name="municipio" id="municipio">
        <option value="">Selecione o municipio</option>
</select>
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar