1

Bom dia Galera! Tudo beleza?

Estou com uma dúvida imensa em dropdown. Eu queria entender como faço para deixar o nome do meu dropdown com o nome dos elementos da lista quando selecionado e quando a pagina for carregada manter.

Também queria saber se tem como carregar de imediato (assim que a pagina abrir pela primeira vez ou não ter seleção no dropdown) o nome do primeiro item da lista.

Abraços!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>


<div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown button
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Only me</a>
                    <a class="dropdown-item" href="#">Team</a>
                    
                  </div>

1 Resposta 1

0

Cara vc tem vários problemas ai, sua ordem de importação das dependências de JS está equivocada, vc deve começar pelo jQuery, que não deve ser a versão slim, use a versão completa. Veja o que indica a documentação https://getbootstrap.com.br/docs/4.1/getting-started/introduction/#template-inicial

Depois vc está usando o componente errado para isso! Não use o Dropdown ele não tem o efeito que vc quer, use o Select, ele sim funciona como vc pretende. Vc pode customiza-lo usando as classes do BS4 como bg-secondary e text-white para ele ficar similar ao visual de um dropdown

inserir a descrição da imagem aqui

E para escolher uma opção para vir selecionada quando abrir a página use o atributo selected na tag <option>, assim por exemplo

<option value="2" selected>Dois</option>

Sobre como manter o que foi selecionado na página mesmo depois do fazer um reload recomendo que leia isso Glr, como eu faço para deixar o elemento que foi criado fixo na página mesmo que a página seja carregada? Pq quando carrega a página ele some exitem outras perguntas do tipo no site vc tem que pesquisar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
  
</style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-6">
        <select class="custom-select bg-secondary text-white">
          <option selected>Abra este menu select</option>
          <option value="1">Um</option>
          <option value="2" selected>Dois</option>
          <option value="3">Três</option>
        </select>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .