JSFiddle - React, Tailwind, and code Playground

by rosenfeld

HTML

<select name=test>
    <option selected></option>
<optgroup label="Saved filters">
    <option>Filter A</option>
    <option>Filter B</option>
</optgroup>
<optgroup class=import-export label="Manage">
    <option value=_import>Import...</option>
</optgroup>
</select>

CSS

optgroup.import-export option {
    color: red;
}

CoffeeScript

oldValue = ''

$('select').change ->
    switch val = $(this).val()
        when '_import' then $(this).val(oldValue); console.log 'import'; return
        when '_export' then $(this).val(oldValue); console.log 'export'; return
        when '' then $('[value=_export]').remove()
        else $('optgroup.import-export').prepend '<option value=_export>Export...</option>'
    oldValue = val