php’s difficulty getting select text fed with javascript and json

Question

The javascript code below fills in the select "regions" (id) options of the json file "list-region-programs-municipio". But in the html form this fills the value with ID value in json. And if you change it does not work select.

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

How do I php get the text?

Html form

<form method="POST" action="SIGPLAM4/cadastro.php" role="form">

<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>
<input type="submit" class="btn btn-primary" value="Cadastrar">

Archive: alimentary-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>');
  }
});

File list-region-programs-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"
   }
]

A simple PHP

if (isset($_POST['regioes']) ? $_POST['regioes'] : null){

Answer 1

I got the solution by joining two procedures (getjson + baroque switch case method)

Choosing in select "regions" feeds select "programs" with getjson:

$(document).ready(function(){
   $.getJSON('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();
   });
});

Also when choosing in select "regions" feeds the select "municipality" with archaic switch case:

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;
}

The 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="programas">Programa desenvolvido</label>
<select name="programas" id="programas" class="form-control">
     <option value="">Selecione o programa</option>
</select>

<label for="municipio">Município de atuação</label>
<select name="municipio" id="municipio">
        <option value="">Selecione o municipio</option>
</select>

Answer 2

Your question is

How do I php get the text?

The question is very vague.

Do you want to take the selected text from the combobox and send it to the registration page? When you send the form through POST the information sent by the combobox is in the "value" of the selected option. To send the text of the region through the form you must fill the "value" field of the option with "select.name", but it doesn’t make much sense to send the name.

Anyway there are numerous ways to send the information. Missing only you say the goal of "make php catch the text"