Select and dynamic div

Question

I wanted to do a sequence of select dynamics, for example:

1º - Seleciona a Categoria (Veiculos);
2º - Seleciona a SubCategoria (Carros);
3º - Seleciona a Marca (do carro);
4º - Seleciona o Modelo (da marca);
5º - Seleciona o Ano (do modelo);

All this comes from a database, follows an example of my 1st select:

<div class="form-group">
     <label  class="col-sm-2 control-label">Categoria:</label>
     <div class="col-sm-6">
         <select name="categorias" id="categorias" class="form-control">
             <option value="0">Escolha uma Categoria</option>
             <?php
                 foreach ($categorias as $categoria) :
                 if($categoria['id_categoria_pai'] == 0){
                    echo "<option value='".$categoria['id']."'>".$categoria['nome']."</option>";
                 }
                 endforeach;
             ?>
         </select>
     </div>
</div>

The next select is hidden in a div. Example:

<div class="form-group">
     <div class="marcaCarros" id="Carro">
         <label  class="col-sm-2 control-label">Marca:</label>
         <div class="col-sm-6">
             <select name="marcaCarros" id="marcaCarros"  class="form-control">
             </select>
         </div>
     </div>
</div>

The Javascript code I’m using:

$('.marcaCarros').hide();

$('#subcategorias').on('change', function() {
  var selecionado = $(this).val();

  $('.marcaCarros').each(function() {
    if ($(this).attr('id') == selecionado) {
      $(this).toggle();
    } else {
      $(this).hide();
    }
  });
});

How can I pass the IDS to the div and popular the select dynamically? If the user changes the first select for example for real estate, it has to change automatically, or change the 2nd to instead of cars, for motorcycles, change automatically.

One more thing, in this example of the car, will have features too, which are also in a div and here I also wanted to do dynamically:

<div id="Carro" class="div-sel">              
    <label class="col-sm-2 control-label">Características</label>
    <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-3"><input type="checkbox" name="caracteristicas[]" value="air-bag"> Air-Bag </div>
            <div class="col-sm-3"><input type="checkbox" name="caracteristicas[]" value="air-bag-duplo"> Air-Bag Duplo </div>
            <div class="col-sm-3"><input type="checkbox" name="caracteristicas[]" value="alarme"> Alarme </div>
        </div>
        <div class="row">
            <div class="col-sm-3"><input type="checkbox" name="caracteristicas[]" value="ar-quente"> Ar-quente </div>
            <div class="col-sm-3"><input type="checkbox" name="caracteristicas[]" value="ac"> Ar-condicionado </div>
            <div class="col-sm-3"><input type="checkbox" name="caracteristicas[]" value="ac-digital"> Ar-condicionado-digital </div>
        </div>
    </div>
</div>

I don’t know if I could explain myself, but I’m starting now and I’m cracking my head.

Answer 1

Create a php file and save as vehicles.php

$tipo = $_GET['tipo'];

//Conexão
//Conecta ao banco de dados
$con = mysql_connect("localhost", "root", "dev") or print (mysql_error()); 

//Seleciona o banco de dados
$db = mysql_select_db("veiculos", $con) or print(mysql_error()); 

if($tipo == 'marcas') {

    //Lista marcas*************************************
    //Faz a consulta
    $result = mysql_query("SELECT * FROM marcas", $con);


    $marcas = array();

    //Lista os resultados em $marcas
    if(mysql_num_rows($result) > 0) {
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $marcas[] = $row;
        }
    }

    //Escreve o json
    echo json_encode($marcas);

} else {

    $idmarca = $_GET['id'];

    //Lista modelos*************************************
    //Faz a consulta
    mysql_query('SET CHARACTER SET utf8');
    $result = mysql_query("SELECT * FROM modelos WHERE marca_id = ".$idmarca, $con);

    $modelos = array();


    //Lista os resultados em $marcas
    if(mysql_num_rows($result) > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $modelos[] = $row;
        }
    }

    //Escreve o json
    echo json_encode($modelos);
}

//Fecha a conexão
mysql_close($con); 


?>

And replace the script with

$(document).ready(function() {


    $.get('veiculos.php?tipo=marcas', function(marcas) {
        //Preenche select marcas
        $(marcas).each(function() {
            option = '<option value="' + this.id + '">' + this.marca + '</option>';
            $('#marcas').append(option);
        });
    }, 'json');

    //Preenche o select modelos com
    //os modelos da marca escolhida
    $('#marcas').change(function() {

        var id = $('#marcas').val();

        $.get('veiculos.php?tipo=modelos&id=' + id, function(modelos) {
            //Preenche select marcas
            $('#modelos').empty();
            $('#modelos').append('<option value="">-- Escolha um modelo --</option>');

            var idMarca = $('#marcas').val();

            $(modelos).each(function() {
                option = '<option value="' + this.id + '">' + this.modelo + '</option>';
                $('#modelos').append(option);
            });

        }, 'json');

    });
});

And use the following SQL to generate the data in your database

    -- Copiando estrutura do banco de dados para veiculos
    CREATE DATABASE IF NOT EXISTS `veiculos` /*!40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci */;
    USE `veiculos`;


    -- Copiando estrutura para tabela veiculos.marcas
    CREATE TABLE IF NOT EXISTS `marcas` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `marca` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

    -- Copiando dados para a tabela veiculos.marcas: ~2 rows (aproximadamente)
    DELETE FROM `marcas`;
    /*!40000 ALTER TABLE `marcas` DISABLE KEYS */;
    INSERT INTO `marcas` (`id`, `marca`) VALUES
        (1, 'Fiat'),
        (2, 'Volkswagen');
    /*!40000 ALTER TABLE `marcas` ENABLE KEYS */;


    -- Copiando estrutura para tabela veiculos.modelos
    CREATE TABLE IF NOT EXISTS `modelos` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `modelo` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
      `marca_id` int(11) NOT NULL DEFAULT '0',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

    -- Copiando dados para a tabela veiculos.modelos: ~0 rows (aproximadamente)
    DELETE FROM `modelos`;
    /*!40000 ALTER TABLE `modelos` DISABLE KEYS */;
    INSERT INTO `modelos` (`id`, `modelo`, `marca_id`) VALUES
        (1, 'Pálio', 1),
        (2, 'Punto', 1),
        (3, 'Siena', 1),
        (4, 'Uno', 1),
        (5, 'Gol', 2),
        (6, 'Saveiro', 2),
        (7, 'Fox', 2);

Answer 2

Dynamic select

<script type="text/javascript">

var option = null;

$(document).ready(function() {


    $.get('veiculos.php?tipo=marcas', function(marcas) {
        //Preenche select marcas
        $(marcas).each(function() {
            option = '<option value="' + this.id + '">' + this.marca + '</option>';
            $('#marcas').append(option);
        });
    }, 'json');

    //Preenche o select modelos com
    //os modelos da marca escolhida
    $('#marcas').change(function() {

        var id = $('#marcas').val();

        $.get('veiculos.php?tipo=modelos&id=' + id, function(modelos) {
            //Preenche select marcas
            $('#modelos').empty();
            $('#modelos').append('<option value="">-- Escolha um modelo --</option>');

            var idMarca = $('#marcas').val();

            $(modelos).each(function() {
                option = '<option value="' + this.id + '">' + this.modelo + '</option>';
                $('#modelos').append(option);
            });

        }, 'json');

    });
});

</script>

<div class="form-group">
    <label  class="col-sm-2 control-label">Marcas:</label>
    <div class="col-sm-6">
        <select name="marcas" id="marcas" class="form-control">
            <option value="0">-- Escolha uma marca --</option>
        </select>
    </div>
</div>
<br>
<div class="form-group">
    <label  class="col-sm-2 control-label">Modelo:</label>
    <div class="col-sm-6">
        <select name="modelos" id="modelos" class="form-control">
            <option value="0">-- Escolha um modelo --</option>
        </select>
    </div>
</div>