HTML multiple select box

by

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>

More Related Contents:

  1. How to collect and manipulate data in HTML using
  2. Disabling Chrome Autofill
  3. POST unchecked HTML checkboxes
  4. Chrome ignores autocomplete=”off”
  5. Put icon inside input element in a form
  6. Does form data still transfer if the input tag has no name?
  7. When submitting a GET form, the query string is removed from the action URL
  8. Is autocomplete=”off” compatible with all modern browsers?
  9. Multiple submit buttons in an HTML form
  10. Disabled form fields not submitting data [duplicate]
  11. Is well formed without a ?
  12. HTML radio buttons allowing multiple selections
  13. Disable spell-checking on HTML textfields
  14. Why does file upload not work without the enctype property?
  15. Can a ::before selector be used with a ?
  16. What characters are allowed in the HTML Name attribute inside input tag?
  17. HTML select form with option to enter custom value
  18. Is there a valid way to disable autocomplete in a HTML form?
  19. How do I make a field required in HTML?
  20. HTML: Characters allowed for name attribute of input element?
  21. Forms with action=””
  22. Submit HTML form in a new tab
  23. HTML input field OUTSIDE of a form
  24. POST vs post, GET vs get
  25. What’s the point of having hidden input in HTML? What are common uses for this?
  26. HTML Input is not updating value attribute on change
  27. Is it safe to use anchor to submit form?
  28. Symfony Forms: HTML5 datalist
  29. button image as form input submit button?
  30. Can I nest form tags in other form tags?

Leave a Comment