Multiple HTML Box

Question

I'm just wondering what the name looks like below? I was googling in the morning for a list of HTML forms, but I could not find such a form anywhere. Can someone tell me the exact name of this form and is it available in HTML formats?

I just want to add this kind of form to my site. Is it accessible for HTML or should I use JavaScript or its restriction only for Windows applications?

Answer 1

Here is a small example to get you started: http://jsfiddle.net/eUDRV/3/

This example moves elements (one or more) from left to right and back. No matter which items are selected on the right side, you will update the text box on the right side.

We use elements:

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

In frame:

• div
• section

Styles using simple CSS. Functionality is provided using JavaScript.

I use jQuery library to make things a little easier. This can also be done using 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> 

Answer 2

This is most often called a list multi selector. Here's a lightweight multi-network jQuery library at loudev.com :