Boîte de sélection multiple HTML

Question

Je me demande simplement quel est le nom du formulaire ci-dessous? J'étais sur Google du matin pour la liste des formulaires HTML, mais je ne pouvais pas trouver ce type de formulaire nulle part. 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 genre de formulaire sur mon site web. Est-ce disponible pour HTML ou devrais-je utiliser JavaScript ou sa seule limitation pour les applications Windows?

Answer 1

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

Cet exemple permet de déplacer des éléments (un ou plusieurs) à partir de la gauche à la droite et à l'arrière de nouveau. N'importe quel élément(s) sont sélectionnés dans le côté droit sera mise à jour de la zone de texte sur le côté droit.

Nous sommes en utilisant les éléments:

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

Encadré par:

• div
• section

Style avec CSS simple. La fonctionnalité est fournie avec JavaScript.

HTML

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

CSS

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

JavaScript

Je suis en utilisant la bibliothèque jQuery pour rendre les choses un peu plus facile. Cela pourrait aussi être fait avec du pur JavaScript.

$("#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());
});