JSFiddle - React, Tailwind, and code Playground

by Mark Penner

HTML

<select>
    <option class="a">aaaaa</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="a">a</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
    <option class="b">b</option>
</select>
<button>click me</button>

CSS

option[disabled] {
    display: none;
}

JavaScript

$('button').on('click', function(ev) {
    ev.preventDefault();
    $('.a').prop('disabled',true);
    if($('select').find('option:selected').prop('disabled')) {
        $('select').find('option:enabled:first').prop('selected',true);
    };
});