Dificuldade do php pegar texto do select alimentado com javascript e json
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.
Obs.: código completo do js mais embaixo
Como faço para o php pegar o texto?
Form html
Arquivo: alimentar-combos-regiao-programas-municipio.js
Arquivo lista-regiao-programas-municipio.json
Um simples PHP
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
Curtidas 0
Respostas
Alex William
29/10/2019
Olá amigo, tudo bem?
Bom, primeiro acredito que voce tenha que mudar:
por:
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:
Verifique se dessa forma funciona.
Espero ter ajudado. :D
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
GOSTEI 0
Liclopes
29/10/2019
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]
GOSTEI 0
Liclopes
29/10/2019
Bom, primeiro acredito que voce tenha que mudar:
por:
'<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.
GOSTEI 0
Liclopes
29/10/2019
Consegui a solução unindo dois procedimentos (getjson + método barroco switch case)
Ao escolher no select "regioes" alimenta o select "programas" com getjson:
Também ao escolher no select "regioes" alimenta o select "municipio" com switch case arcaico:
O form select html:
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>
GOSTEI 0