How to keep selected a nested combobox data when reloading the page?

0

Hello everyone, I would like to know if it is possible to keep a data of a nested combobox selected and that at the same time this data that is selected to send the other data automatically, it is necessary to say that I already have the nested combobox. the other data will come out automatically. without need that I am selecting the data here the code and the images, the one that I want to quit automatically is the one that says Municipality and from there the others

Now I show the code of my municipality php, of the js and where I have the variable in the form

First municipality

    <?php
require_once 'conexions.php';

function getMunicipio(){
  $mysqli = getConn();
  $query = "SELECT * FROM Municipio";
  $result = $mysqli->query($query);
  $listas = '<option value="0">Elige una opción</option>';
  while($row = $result->fetch_array(MYSQLI_ASSOC)){
    $listas .= "<option value='$row[id]'>$row[nombre]</option>";
  }
  return $listas;
}

echo getMunicipio();
?>

after the js

$(document).ready(function(){
  $.ajax({
    type: 'POST',
    url: 'cargar_municipio.php'
  })
  .done(function(listas_rep){
    $('#lista_municipio').html(listas_rep)
  })
  .fail(function(){
    alert('Hubo un errror al cargar los municipos')
  })

  $('#lista_municipio').on('change', function(){
    var id = $('#lista_municipio  ').val()
    $.ajax({
      type: 'POST',
      url: 'cargar_categoria.php',
      data: {'id': id}
    })
    .done(function(listas_rep){
      $('#lista_categoria').html(listas_rep)
    })
    .fail(function(){
      alert('Hubo un errror al cargar las categorias')
    })

    var id_lista = $('#lista_categoria').val()
    $.ajax({
      type: 'POST',
      url: 'cargar_subcategoria.php',
      data: {'id': id}
    })
    .done(function(listas_rep){
      $('#lista_subcategoria').html(listas_rep)
    })
    .fail(function(){
      alert('Hubo un errror al cargar los segundo')
    })

And now the section of the form where I have the variable in case you want to know what it is

  <div class="row">

                      <label id="f1" for="Fuente">Municipio:</label>
                      <select  id="lista_municipio" name="Ubicacion" class="form-control">
                      </select>



                    <label id="f1" for="Fuente">Categoria:</label>
                    <select id="lista_categoria" name="Categoria" class="form-control">
                    </select>



                      <label id="f1" for="Fuente">Subcategoria:</label>
                      <select id="lista_subcategoria" name="Subcategoria" class="form-control">
                      </select>

</div>
    
asked by AdrLz 27.10.2017 в 00:06
source

1 answer

1

To your select add a class you want to be .selectChange and add this to the end of your JS:

$(".selectChange").each(function(){
 $(this).change();
});

What this function does is find all the elements with this class and execute a change() , as if you would change them manually.

HTML:

<div class="row">

    <label id="f1" for="Fuente">Municipio:</label>
    <select  id="lista_municipio" name="Ubicacion" class="form-control selectChange">
    </select>



    <label id="f1" for="Fuente">Categoria:</label>
    <select id="lista_categoria" name="Categoria" class="form-control selectChange">
    </select>



    <label id="f1" for="Fuente">Subcategoria:</label>
    <select id="lista_subcategoria" name="Subcategoria" class="form-control selectChange">
    </select>

</div>

I hope it serves you.

    
answered by 27.10.2017 в 00:16