I wanted to do a sequence of select
dynamic, 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, here is 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>
Next select
is hidden in 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 do to pass the IDS to div
and popular select
dynamically?
If the user changes the first select
for example for real estate, he has to change automatically, or to change the 2nd to instead of cars, for motorcycles, to change automatically.
One more thing, in this example of the car, will have characteristics as well, which are also in 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 do not know if I could explain myself, but I'm starting now and breaking my head.