HTML multiple select box

Solution 1:

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:

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

MultiSelect

HTML multiple select box

Solution 1:

Solution 2:

Related

Recent Posts