HTML multiple select box

HtmlForms

Html Problem Overview


I am just wondering what's the name of the below form? I was Googling from morning for the list of HTML forms but I couldn't find this kind of form anywhere. Can anyone tell me the exact name of this form and is this available in HTML forms?

enter image description here

I just want to add this kind of form in my website. Is that available for HTML or should I use JavaScript or its only limited for Windows applications?

Html Solutions


Solution 1 - Html

Here's a little sample to get you started: http://jsfiddle.net/eUDRV/3/

This example will move items (one or multiple) from the left to the right and back again. Whatever item(s) are selected in the right side will update the textbox on the right side.

We are using the elements:

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

Framed by:

  • div
  • section

Styled with simple CSS. Functionality is provided with JavaScript.

I'm using the jQuery library to make things a little easier. This could also be done with pure 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());
});

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>

Solution 2 - Html

It's most commonly referred to as a listbox multiselect. Here's a lightweight jQuery multiselect library at loudev.com:

MultiSelect

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKerryView Question on Stackoverflow
Solution 1 - HtmlTim M.View Answer on Stackoverflow
Solution 2 - HtmlWim MostreyView Answer on Stackoverflow