web-dev-qa-db-fra.com

HTML: sélectionnez multiple comme liste déroulante

J'aimerais utiliser un champ select avec multiple comme champ déroulant commun avec size=1:

<select name="test[]" size="1" multiple>
    <option>123
    <option>456
    <option>789
</select>

Pourquoi ce code ne montre-t-il pas la flèche pour la liste déroulante?

Merci!

htmldrop-down-menu
4
WeekendCoder

Une question similaire a été posée ici

Si vous pouvez ajouter une bibliothèque externe à votre projet, vous pouvez essayer Choisi

Voici un exemple:

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

Une chose que j'ai rencontrée, vous devez inclure JQuery AVANT d'inclure Choisi ou vous obtiendrez des erreurs.

16
mgroat

Faire des sélections multiples de taille 1 n’est pas pratique, pensez-y. J'ai fait un violon ici: https://jsfiddle.net/wqd0yd5m/2/

<select name="test" multiple>
    <option>123</option>
    <option>456</option>
    <option>789</option>
</select>

Essayez d’explorer d’autres options, telles que l’utilisation de cases à cocher pour atteindre votre objectif.

4
Martin Gottweis

Parce que vous utilisez plusieurs. Bien que techniquement, il s'agisse d'un menu déroulant, il ne ressemble pas à un menu déroulant standard. Au lieu de cela, il remplit une zone de liste et leur permet de sélectionner plusieurs options.

La taille détermine le nombre d'options qui apparaissent avant de cliquer vers le haut ou le bas pour voir les autres options.

J'ai le sentiment que ce que vous voulez réaliser ne sera possible qu'avec un plugin JavaScript.

Quelques exemples: 

Menu déroulant multisélectionner jQuery

http://labs.abeautifulsite.net/archived/jquery-multiSelect/demo/

2
CannonFodder

Vous aurez probablement besoin de plugins comme Jquery multiselect dropdown. Voici un demo .

Aussi, vous devez fermer vos balises option comme ceci:

<select name="test" multiple>
    <option>123</option>
    <option>456</option>
    <option>789</option>
</select>

JSFIDDLE DEMO

2
Rahul Tripathi