JSFiddle - React, Tailwind, and code Playground

by no1_melman

HTML

<table>
    <tr>
        <td>
            Category
        </td>
        <td>
            Items of Category
        </td>
        <td>
        </td>
        <td>
            Selected Items
        </td>
    </tr>
    <tr>
        <td>
<div>
    <select name="drop1" id="SelectBox" size="4" style="width:100%;height : 200px">
        <option value="art">Art</option>
        <option value="video">Video</option>
    </select>
</div>
        </td>
        <td>
<select name="drop1" id="SelectBox2" size="4" multiple="multiple" style="width:100%;height : 200px">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
        </td>
        <td>
<input type="button" id="add" value=">>" style="display:block;" />
<input type="button" id="remove" value="<<" style="display:block;" />
        </td>
        <td>
<select id="SelectedItems" size="4" multiple="multiple" style="width:100%;height : 200px"></select>
        </td>
    </tr>
</table>

<input type="hidden" id="hidden1" />
<p id="selectedValues"></p>

CSS

div {
    display: inline;
    height: 200px;
}

body
{
    font:0.9em Verdana;
}

td, tr { padding:0px 5px 0px 5px; }

JavaScript

$(function () {
    var artItems = ["Art 1", "Art 2", "Art 3", "Art 4", "Art 5", "Art 6"];
    var vidItems = ["Video 1", "Video 2", "Video 3", "Video 4", "Video 5", "Video 6"];
    $('#SelectBox').change(function () {
        var str = "",
            inHTML = "",
            items;
        items = $(this).val() == 'art' ? artItems : vidItems;
        $.each(items, function (i, ob) {
            var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });

            inHTML += '<option value="' + guid + '">' + ob + '</option>';
        });
        $("#SelectBox2").empty().append(inHTML);
    });

    $('#SelectBox2').change(function () {
        $("#selectedValues").text($(this).val() + ';' + $("#SelectBox").val());
    });

    $('#add').click(function () {
        inHTML = "";
        $("#SelectBox2 option:selected").each(function () {
            var optionVal = $(this).val();
            var exists = false;

            $('#SelectedItems option').each(function () {
                if (this.value == optionVal) {
                    exists = true;
                }
            });

            if (!exists) {
                inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
            }
        });

        $("#SelectedItems").append(inHTML);

        var ids = "";

        $('#SelectedItems option').each(function () {
            ids += this.value + ",";
        });

        $('#hidden1').val(ids);
    });

    $('#remove').click(function () {
        $("#SelectedItems option:selected").remove();

        var ids = "";

        $('#SelectedItems option').each(function () {


            ids += $(this).val() + ";";
        });

        $('#hidden1').val(ids);
    });
});