Using just JavaScript:
HTML
<select id="area" name="area">
<option value="">Selecione</option>
<option value="Informática">Informática</option>
<option value="RH">RH</option>
</select>
<select id="setor" name="setor">
</select>
JavaScript (I used Jquery to facilitate):
$(function(){
var setores = {
"Informática": ["Sistemas", "Suporte", "Redes"],
"RH": ["Folha de pagamento", "Benefícios", "Contratações"]
};
$("#area").on('change', function(){
var options = $("#setor");
options.find('option').remove();
if($(this).val() == "") return;
$.each(setores[$(this).val()], function() {
options.append
($("<option />").val(this).text(this)
);
});
});
});
Example on JSFiddle
In php just get the values of the two select
and concatenate.
$_POST['area'].' > '.$_POST['setor']
The values of select
can be done via ajax as well