JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<select>
    <option value="context|cow">context|cow</option>
    <option value="context|test">context|test</option>
    <option value="thing|1">thing|1</option>
    <option value="thing|5">thing|5</option>
    <option value="thing|27">thing|27</option>
    <option value="context|beans">context|beans</option>
</select>
<div id="output"></div>

JavaScript

function sift(select) {
    var vals = {};

    $.each(select.options, function() {
        var valArr = this.value.split('|');
        if (typeof vals[valArr[0]] === 'undefined') {
            vals[valArr[0]] = ''; 
        } else {
            vals[valArr[0]] += ',';
        }
        vals[valArr[0]] += valArr[1];
    });
    $.each(vals, function (key, val) {
        $('#output').append('<div>' + key + ' = ' + val + '</div>');
    });
}
sift($('select')[0]);