[Dúvida] validação e preenchimento de select | Lógica de programação

estou preenchendo um form, nessa classe que vou preencher tem algumas chaves estrangeiras que estou buscando no banco, mas presciso verificar quais vou exibir de acordo com outra, estou preenchendo uma classe que se chama frete, com duas chaves estrangeiras, Carga e KM através da carga selecionado devo exibir determinados km, se ele alterar a carga os KM exibidos devem alterar estou fazendo em js function verifica(){ var select = document.getElementById("carga"); var selectKm = document.getElementById("km") var opcaoValor = select.options[select.selectedIndex].value; if(opcaoValor == null){

    }
    else{
        var div1 = document.querySelector("#km").disabled = false
        for(var i = 0; i < kms.length; i++){
            for(var j = 0; j < kms[i].carga.length; j++){

                if(kms[i].carga[j].id == opcaoValor){
                    var html = '<option >'+kms[i].num_km+'</option>'
                    document.getElementById('km').innerHTML += html
                }
            }
        }

    }
}

na hora que mudo a carga o km referente a carga anterior deveria não aparecer se alguém puder me ajudar

Olá Eduardo! Tudo bem? Peço desculpas pela demora em obter um retorno.

Pelo que entendi, parece que você está tentando implementar um comportamento em que, quando uma opção de carga é selecionada, os valores de km relacionados a essa carga específica são exibidos. E quando você muda a seleção de carga, os valores de km relacionados à carga anterior não devem aparecer mais.

Para atingir esse comportamento, você pode seguir os seguintes passos:

Limpar Valores Anteriores: Antes de adicionar os novos valores de km, você deve limpar os valores existentes no elemento select de km. Isso garante que apenas os valores relevantes sejam exibidos.
Desabilitar Opções Anteriores: Ao adicionar os novos valores de km, você também precisa desabilitar as opções que correspondem aos valores antigos de km que não são mais relevantes.

Aqui está o código ajustado com esses passos:

function verifica() {
    var select = document.getElementById("carga");
    var selectKm = document.getElementById("km");
    var opcaoValor = select.options[select.selectedIndex].value;

    // Limpar valores anteriores e reabilitar a seleção
    selectKm.innerHTML = '<option disabled selected>Selecione o KM</option>';
    selectKm.disabled = false;

    if (opcaoValor == null) {
        // Selecione a opção padrão de KM e desabilite a seleção
        selectKm.innerHTML = '<option disabled selected>Selecione o KM</option>';
        selectKm.disabled = true;
    } else {
        for (var i = 0; i < kms.length; i++) {
            for (var j = 0; j < kms[i].carga.length; j++) {
                if (kms[i].carga[j].id == opcaoValor) {
                    var html = '<option>' + kms[i].num_km + '</option>';
                    selectKm.innerHTML += html;
                }
            }
        }
    }
}

Certifique-se de que a estrutura de dados kms contém as informações corretas das cargas e km para que a comparação funcione adequadamente. Além disso, este código assume que o valor das opções no elemento select de carga ("carga") é o mesmo que o id usado para corresponder com os km no array kms.

Espero ter ajudado, qualquer dúvida fico à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Chegou a hora de transformar