Boîte de sélection multiple HTML

Question

Je me demande simplement quel est le nom du formulaire ci-dessous? Je faisais des recherches Google depuis le matin pour la liste des formulaires HTML, mais je ne pouvais pas trouver ce genre de formulaire n'importe où. Quelqu'un peut-il me dire le nom exact de ce formulaire et est-ce disponible dans les formulaires HTML?

Je veux juste ajouter ce type de formulaire dans mon site. Est-ce disponible pour HTML ou devrais-je utiliser JavaScript ou son limité pour les applications Windows?

Answer 1

Voici un petit échantillon pour vous aider à démarrer: http://jsfiddle.net/eUDRV/3/

Cet exemple déplacer des éléments (un ou plusieurs) de gauche à droite et inversement. Quel que soit le ou les éléments sélectionnés dans le côté droit, la zone de texte sera mise à jour sur le côté droit.

Nous utilisons les éléments:

• select
• input type="button"
• input type="text"

Encadré par:

• div
• section

Érigé avec CSS simple. La fonctionnalité est fournie avec JavaScript. J'utilise la bibliothèque jQuery pour rendre les choses un peu plus faciles. Cela pourrait également être fait avec JavaScript pur.

$("#btnLeft").click(function() { 
 
    var selectedItem = $("#rightValues option:selected"); 
 
    $("#leftValues").append(selectedItem); 
 
}); 
 

 
$("#btnRight").click(function() { 
 
    var selectedItem = $("#leftValues option:selected"); 
 
    $("#rightValues").append(selectedItem); 
 
}); 
 

 
$("#rightValues").change(function() { 
 
    var selectedItem = $("#rightValues option:selected"); 
 
    $("#txtRight").val(selectedItem.text()); 
 
});

SELECT, INPUT[type="text"] { 
 
    width: 160px; 
 
    box-sizing: border-box; 
 
} 
 
SECTION { 
 
    padding: 8px; 
 
    background-color: #f0f0f0; 
 
    overflow: auto; 
 
} 
 
SECTION > DIV { 
 
    float: left; 
 
    padding: 4px; 
 
} 
 
SECTION > DIV + DIV { 
 
    width: 40px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section class="container"> 
 
    <div> 
 
     <select id="leftValues" size="5" multiple></select> 
 
    </div> 
 
    <div> 
 
     <input type="button" id="btnLeft" value="&lt;&lt;" /> 
 
     <input type="button" id="btnRight" value="&gt;&gt;" /> 
 
    </div> 
 
    <div> 
 
     <select id="rightValues" size="4" multiple> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     <div> 
 
      <input type="text" id="txtRight" /> 
 
     </div> 
 
    </div> 
 
</section>

Answer 2

Il est le plus communément appelé un multiselect listbox. Voici une bibliothèque jQuery multiselect légère à loudev.com: