JSFiddle - React, Tailwind, and code Playground
by Thiago Diniz
HTML
<form id="form">
<select name="marca">
<option value="null" name="null" rel="null">Selecione</option>
<option value="Honda" name="Honda" rel="fq=specificationFilter_196:Honda">Honda</option>
</select>
<select name="modelo">
<option data-marca="null" value="null" name="null" rel="null">Selecione</option>
<option data-marca="Honda" value="Falcon" name="Falcon" rel="fq=specificationFilter_197:Hornet">Falcon</option>
<option data-marca="Honda" value="Hornet" name="Hornet" rel="fq=specificationFilter_197:CBR+600F">Hornet</option>
</select>
<select name="ano">
<option data-modelo="null" value="null" name="null" rel="null">Selecione</option>
<option data-modelo="Falcon" value="2012" name="2012" rel="fq=specificationFilter_198:2012">2012</option>
<option data-modelo="Hornet" value="2013" name="2013" rel="fq=specificationFilter_198:2013">2013</option>
</select>
</form>
CSS
select {
width:33%;
float:left;
margin: 0 0.16%;
border:0;
}
option {
border:0 !important;
}
JavaScript
var modelo = $('select[name="modelo"] option');
var ano = $('select[name="ano"] option');
$('select[name="marca"]').on('change', function () {
var marca = this.value;
var novoSelect = modelo.filter(function () {
return $(this).data('marca') == marca;
});
$('select[name="modelo"]').html(novoSelect);
});
$('select[name="modelo"]').on('change', function () {
var modelo = this.value;
var novoSelect2 = ano.filter(function () {
return $(this).data('modelo') == modelo;
});
$('select[name="ano"]').html(novoSelect2);
});