Como popular um combobox (Select) ao clicar em outro combobox, por exemplo eu tenho um combobox com 3 opções ao selecionar uma opção ele recarrega o outro com as opcoes referentes ao selecionado, alguém saberia como fazer isso usando javascript?
Achei varios exemplos antes de publicar a pergunta mas nenhum me atendei, então o que eu gostaria de fazer é identico o código abaixo o problema é que quando eu inicializo a pagina ele exibe 3 opções de cidades, no caso Macae aparece duas vezes até que o usuário selecione uma opção, e quando eu vou enviar os dados e como o exemplo funciona com a filtragem através do Value ele não envia as informações que eu gostaria de enviar que seria o conteúdo importante para o usuário, segue o código abaixo.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var concelhos = $('select[name="cmbcidade"] option');
$('select[name="cmbopcao"]').on('change', function () {
var Cmbopcao = this.value;
var novoSelect = concelhos.filter(function () {
return $(this).data('distrito') == Cmbopcao;
});
$('select[name="cmbcidade"]').html(novoSelect);
});
});//]]>
</script>
</head>
<body>
<p>Selecione a seguinte opção:
<select name="cmbopcao" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1">
<option value="dois">Escritório Mobiliado</option>
<option value="dois">Escritório Virtual</option>
<option value="dois">Escritório Eventual</option>
<option value="um">Escritório de Treinamento</option>
<option value="dois">Escritório de Reunião</option>
<option value="dois">Video Conferencia</option>
</select></p>
<p>Selecione a cidade:
<select name="cmbcidade" size="1" width="195" class="COMBOCONCCSS" id="COMBOCID" tabindex="1">
<option data-distrito="dois" value="Macae">Macae</option>
<option data-distrito="dois" value="Rio de Janeiro">Rio de Janeiro</option>
<option data-distrito="um" value="Macae">Macae</option>
</select></p>
</body>
</html>