Popular um select a partir da seleção de outro

Programação e Desenvolvimento
1

olá pessoal,

estou tentando fazer um select que será preenchido após a seleção de outro. Estou usando flask, bootstrap e javascript para aprender webapp (estou replicando um app do meu estágio).

no meu html tenho:

<form action="/monitorar" method="post">
     <label  class="form-label">Selecione o OKR a ser atualizado</label>
     <select class="form-select" aria-label="Default select example" name="okr" id="obj-shift" onchange="VariacaoOkr()">
          {% for label, row in obj.iterrows(): %}
          <option value="{{row['id_obj']}}">{{row["texto"]}}</option>
          {% endfor %}
     </select>
     <br>

     <label class="form-label">Selecione o KR a ser atualizado</label>
     <select class="form-select" aria-label="Default select example" name="kr" id="kr-shift">
        {% for label, row in kr.iterrows(): %}
        <option data-kr="{{row['id_obj']}}" value="{{row['id_kr']}}" >{{row["texto"]}}</option>
        {% endfor %}
         </select>
         <br>

      <div class="row">
           <div class="col-8">
                <div class="">
                    <label class="form-label">Problema/Progresso/Plano</label>
                    <textarea class="form-control" rows="3" name="ppp"></textarea>
                </div>
            </div>
            <div class="col-3">
                  <div class="">
                    <label class="form-label">Valor atual: {{valor}}</label>
                    <textarea class="form-control"  rows="1" name="valor"></textarea>
                </div>
            </div>
       </div>
       <br>

          <button type="submit" class="btn btn-primary" onclick="Mensagem()">Submit</button>
        </form>

e então tentei fazer a seleção com o seguinte no arquivo js:

function VariacaoOkr() {
#esconder as opções do segundo select
$(“kr-shift option”).hide();

#mostrar conforme seleção
$("obj-shift").on("change", function(){
                  let obj = $("#obj-shift").val();
                  $("#kr-shift option").hide();
                  $("#kr-shift option[data-kr=" + obj + "]").show();
    });

};

Porém a página continuou mostrando as opções e não realizou as alterações necessárias. Alguém sabe o que deu errado?

grato.