JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<select id="mainmenu" style="width:300px">
    <option value>Select from menu</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<select id="submenu" style="width:300px">
    <option value>Select from submenu</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

JavaScript

$(function () {
    $('#mainmenu, #submenu').selectmenu();
    $('#mainmenu').selectmenu({
        'change': function (e, ui) {
            var selectVal = $('option:selected', this).val();
            if (selectVal == 'two') {
                $('#submenu').selectmenu('open');
                $('#submenu option:eq(1)').focus();
            }
        }
    });
});