<select> vs plusieurs boutons dans un div transformés en liste déroulante

Question

En HTML, quelle est la différence entre l'utilisation de la balise <select> tag avec enfant <option> à l'intérieur contre un <button> avec un <div> qui comporte de nombreux boutons enfants qui n'apparaissent et ne disparaissent que lorsque le bouton est pressé ?

Quelque chose comme (ne vous souciez pas que les options soient différentes, le concept est essentiel) :

<select name="dog-names" id="dog-names">
  <option value="rigatoni">Rigatoni</option>
  <option value="dave">Dave</option
  <option value="pumpernickel">Pumpernickel</option>
</select>

contre quelque chose comme ce code :

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 1

La différence est que <select> sont les plus utiles lorsqu'elles sont utilisées dans un <form> (c'est-à-dire que les données sont envoyées à un serveur). Dans une application JS uniquement, vous pouvez utiliser la balise <select> mais il est plus logique de créer une liste déroulante personnalisée. De cette façon, vous pouvez la personnaliser comme vous le souhaitez et ajouter des écouteurs d'événements.

Par exemple, si vous avez un formulaire web qui envoie des données à un backend, vous devez utiliser un fichier de type <select> une étiquette comme celle-ci :

<form action="/name.php" method="post">
  What is your name?
  <select name="dogname">
    <option value="Bob">Bob is my name!</option>
    <option value="Joe">Joe is my name!</option>
    <option value="Jeff">Jeff is my name!</option>
  </select>
  <input type="submit" value="Submit">
</form>

Dans cet exemple, le value de l'attribut sélectionné <option> sera envoyé dans un paramètre nommé dogname au serveur. Pour un formulaire HTML, c'est exactement ce que nous voulons.

Cependant, il est difficile de personnaliser l'aspect de ce formulaire et il n'est pas très utile pour des éléments comme les barres de navigation. Si vous souhaitez interagir avec la liste déroulante en JavaScript et la styliser à l'aide de CSS, il est préférable d'utiliser une balise <div> y <button> éléments. Comme ceci :

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Comme vous le voyez dans l'extrait ci-dessus, la liste déroulante est beaucoup plus belle et convient mieux aux éléments non formels. Mais, la sélection <button> n'est pas envoyé à un serveur comme dans le premier extrait. Pour une barre de navigation, c'est exactement ce que nous voulons.