JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<select>
    <option class="mobile">Mobile template 1</option>
    <option class="mobile">Mobile template 2</option>
    <option class="desktop">Desktop template 1</option>
    <option class="desktop">Desktop template 2</option>
    <option class="desktop">Desktop template 3</option>
</select>

<p>
<button class="mobile" type=button>Mobile templates</button>
<button class="desktop" type=button>Desktop templates</button>
</p>

JavaScript

var select = $( 'select' );
$( 'button.mobile' ).on( 'click', function () {
    $( 'option.desktop' ).hide();
    $( 'option.mobile' ).show();
    if ( $( select[0].options[ select.prop( 'selectedIndex' ) ] ).is(':hidden') ) {
        select.prop( 'selectedIndex', -1 );
    }
});
$( 'button.desktop' ).on( 'click', function () {
    $( 'option.mobile' ).hide();
    $( 'option.desktop' ).show();
    if ( $( select[0].options[ select.prop( 'selectedIndex' ) ] ).is(':hidden') ) {
        select.prop( 'selectedIndex', -1 );
    }
});