JSFiddle - React, Tailwind, and code Playground

by skayllkronn

HTML

<div class="palette">
    <div class="choices">
        <select multiple="true" class="unselected" style="width: 100%; height: 100%;">
            <option>bla</option>
            <option>ble</option>
            <option>bli</option>
            <option>blo</option>
        </select>
    </div>
    <div class="controls">
        <input type="button" class="add" value=">" />
        <input type="button" class="remove" value="<" />
        <input type="button" class="down" value="v" />
        <input type="button" class="up" value="^" />
    </div>
    <div class="choices">
        <select multiple="true" class="selected" style="width: 100%; height: 100%;" id="lista">
        </select>
    </div>
    <strong id="valor">valor</strong>
</div>

CSS

div.choices {
    display: inline-block;
    vertical-align: middle;
    height: 150px;
    width: 120px;
    background-color: red;
}

div.controls {
    display: inline-block;
    width: 25px;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

JavaScript

$(document).ready(function() {
    $('.palette .add').click(function(e) {
        var options = $('select.unselected option:selected');
        $('select.selected').append(options);
        e.preventDefault();
        return false;
    });
    $('.palette .remove').click(function(e) {
        var options = $('select.selected option:selected');
        $('select.unselected').append(options);
        e.preventDefault();
        return false;
    });
    $('.palette .down').click(function(e) {
        var options = $('select.selected option:selected');
        options.last().next().after(options)
        e.preventDefault();
        return false;
    });
    $('.palette .up').click(function(e) {
        var options = $('select.selected option:selected');
        options.first().prev().before(options)
        e.preventDefault();
        return false;
    });
    var arreglo = [];
function recuperaValue(){
    $("#lista option").each(function(){
            arreglo.push($(this).val());
        });
    $("#valor").html(
        " <b>valor:</b> " +
        arreglo);
}
if ($("select").change(recuperaValue)){
//arreglo = 0;
recuperaValue();
}
});