Change Dropdown name to list item names

Asked

Viewed 124 times

1

Good morning Guys! All beauty?

I’m having a huge doubt in dropdown. I wanted to understand how to leave the name of mine dropdown with the list elements name when selected and when the page is loaded keep.

I also wanted to know if you can load immediately (as soon as the page opens for the first time or has no selection on dropdown) the name of the first list item.

Hugs!

<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>

php javascript jquery codeigniter bootstrap-4

1 answer

0


Dude you have several problems there, your import order of JS dependencies is wrong, you should start with jQuery, which should not be the version slim, use the full version. See what the documentation indicates https://getbootstrap.com.br/docs/4.1/getting-started/introduction/#template-home

Then you’re using the wrong component for this! Don’t use the Dropdown it doesn’t have the effect you want, use the Select, it does work as you intend it to. Vc can customize it using BS4 classes like bg-secondary and text-white for it to look similar to the look of a dropdown

inserir a descrição da imagem aqui

And to choose an option to be selected when opening the page use the attribute selected on the tag <option>, so for example

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

On how to keep what was selected on the page even after doing a Reload I recommend reading this Glr, how do I leave the element that was created fixed on the page even if the page is loaded? When loading the page it disappears there are other questions of the type on the site you have to search.

<!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>

Browser other questions tagged php javascript jquery codeigniter bootstrap-4

You are not signed in. Login or sign up in order to post.