JSFiddle - React, Tailwind, and code Playground

by jackwanders

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container-fluid">
    <div class="row-fluid">
        <!-- MARKUP GOES HERE -->
        <select id="one" multiple>
            <option>a</option>
            <option>b</option>
            <option>c</option>
            <option>d</option>
        </select>
        <select id="two" multiple>
            
        </select>
        <button class="transfer" data-from="#one" data-to="#two">&raquo;</button>
        <button class="transfer" data-from="#two" data-to="#one">&laquo;</button>
        <!-- END MARKUP -->
    </div>
</div>

<!-- http://html-ipsum.com/ for sample markup -->

CSS

body { margin-top: 20px; }

JavaScript

$(function(){
    $('.transfer').on('click',function(){
        $($(this).data('from'))
            .find(':selected')
            .remove()
            .appendTo($(this).data('to'))
            .prop('selected',false);
    });
});