Tenho o seguinte código que funciona para selecionar a cidade e estado dentro de um array, porém ele foi desenvolvido para apenas um ComboBox, eu preciso adaptar ele para usar como Origem e Destino e gostaria de saber como faço para duplicar o ComboBox, deixar um para Origem e outro para Destino.
Eu encurtei a quantidade de cidade e estado do array original, para poder visualizar melhor.
Alguém poderia me dizer como fazer essa adaptação?
Segue o Código.
<script>
(function(){
var estados = {"35":{"sigla":"SP","nome":"S\u00e3o Paulo"},"41":{"sigla":"PR","nome":"Paran\u00e1"}}};
var municipios = {"1100015":"Alta Floresta D'oeste","1100023":"Ariquemes"};
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
var $elements = document.getElementsByClassName('js-origem');
for(var i = 0; i < $elements.length; i++){
var $element = $elements[i];
var $estados = $element.getElementsByClassName('js-estados-origem')[0];
var $municipios = $element.getElementsByClassName('js-municipios-origem')[0];
var estados_options = [];
var municipios_options = {};
var estado_selected = $estados.dataset.value;
var municipio_selected = $municipios.dataset.value;
$estados.innerHTML = "<option>Selecione</option><option disabled></option>";
for(var code_estado in estados){
var option_estado = document.createElement("option");
option_estado.text = estados[code_estado].nome;
option_estado.value = code_estado;
option_estado.setAttribute('code', code_estado);
estados_options.push(option_estado);
municipios_options[code_estado] = [];
for(var code_municipio in municipios){
if(code_municipio.substr(0,2) == code_estado){
var option_municipio = document.createElement("option");
option_municipio.text = municipios[code_municipio];
option_municipio.value = code_municipio;
option_municipio.setAttribute('code', code_municipio);
municipios_options[code_estado].push(option_municipio);
}
}
}
estados_options = estados_options.sort(function(a,b){
return a.text.localeCompare(b.text);
});
estados_options.forEach(function(option){
$estados.add(option);
});
$estados.onchange = function(){
var selected_option = $estados.options[$estados.options.selectedIndex];
var code_estado = selected_option.getAttribute('code');
$municipios.innerHTML = "<option>Selecione</option><option disabled></option>";
municipios_options[code_estado].forEach(function(option){
$municipios.add(option);
});
}
if(estado_selected){
$estados.value = estado_selected;
$estados.onchange();
}
if(municipio_selected){
$municipios.value = municipio_selected;
}
};
}
}
})();
</script>
<div class="js-origem">
<label>Origem:
<select class="js-estados-origem form-control" data-value="SP"></select>
</label>
<label>
<select class="js-municipios-origem form-control" data-value="São Paulo"></select>
</label>
</div>