EE - 29080798

by ChrisStanyon

HTML

<div id="carOptions">
    <select id="available" size="5">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

    <div id="buttons">
        <button id="add">Add >></button>
        <button id="remove"><< Remove</button>
    </div>

    <select id="selected" size="5"></select>
</div>

<input type="text" name="selectedCars">

CSS

select, #buttons { width: 100px; float:left; margin: 5px 5px 5px 0px }
button {display: block; width: 100px; }
#carOptions { overflow:hidden; }

JavaScript

$(document).ready(function() {
    $('#add').click(function(e) {
        e.preventDefault();
        if ($("#selected option").filter(function (i, o) { return o.value === $('#available option:selected').val(); }).length === 0)
        {
            $('#selected').append($('#available option:selected').clone());
            buildList();
        }
    });

    $('#remove').click(function(e) {
        e.preventDefault();
        $('#selected option:selected').remove();
        buildList();
    });

    function buildList() {
        var cars = [];

        $('#selected option').each(function(i,e) {
            cars.push($(this).val());
        });

        $("input[name='selectedCars']").val(cars.join());
    }
});