JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<select class="collectMe">
    <option value="">any</any>
        <option>hello</option>
        <option>good day</option>
        <option>hi</option>
</select>
<select class="collectMe">
    <option value="">any</any>
        <option>apples</option>
        <option>oranges</option>
        <option>pears</option>
</select>
<select class="collectMe">
    <option value="">any</any>
        <option>Dillon</option>
        <option>James Blake</option>
        <option>King Krule</option>
</select>
<hr>
<button>do that thang</button>
<select id="target">
    <option value="">any</any>
</select>
    <div id="console"></div>

CSS

select {
    width: 200px;
}

#console {
    background-color: black;
    color: lime;
    font-family: monospace;
    height: 200px;
    width: 300px;
    overflow: scroll;
    margin-top: 20px;
}

JavaScript

function log(msg) {
    $("#console").append(msg + "<br>");
}

$("button").on("click", function () {
    var $target = $("#target"),
        $options;

    $options = $(".collectMe").map(function () {
        var $el = $(this);
        return $el.val().length ? $el.find("option:selected") : undefined;
    });

    log("selected options: ", $options.length);

    $target.find("option:gt(0)").remove();

    $options.each(function () {
        log("appending " + $(this).val());
        $(this).clone().appendTo($target);
    });
});