HTML multiple select box

Question

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?

TessavWalstijn · Accepted Answer · 2017-10-21 09:10:27Z

97

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>

edited Oct 21, 2017 at 9:10

TessavWalstijn

1,7343 gold badges23 silver badges39 bronze badges

answered Mar 29, 2013 at 2:56

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

aman_novice Over a year ago

<select id="rightValues" size="4" multiple> <option>1</option> <option>2</option> <option>3</option> </select> Can you please tell me what is how to restrict a user to select only a limited number of items available? Say i just want that user can select only 2 of the 3 options?

Starjumper Tech SL Over a year ago

What's the text box (txtRight) for?

Tim M. Over a year ago

@MarbellaConsulting - the textbox is to match the screenshot in the original question and to show how changing the selected values can update another element.

Tim M. Over a year ago

@Beofett - it works for me in IE8 document mode (IE11) and on a true IE8 VM. However, JS Fiddle is broken in IE8, so you would need to view the example at: fiddle.jshell.net/eUDRV/3/show. Also, I used an section tag in the example so IE8 would require an HTML 5 shim to make it work (or use another tag). Let me know if you found another problem.

Beofett Over a year ago

@TimMedora Please accept my apologies. This was absolutely a PEBKAC problem on my end. This does work just fine in IE8.

Collectives™ on Stack Overflow

HTML multiple select box

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related