JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <label>
            <input type="checkbox" id="toggle" />Toggle Select</label>
            <select name="targets" id="targets" data-native-menu="true">
                <option value="0">-----Select an option ----</option>
                <option value="1">option 1</option>
                <option value="2">option 2</option>
                <option value="3">option 3</option>
            </select>
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function () {

    $("#toggle").on('change', function () {
        $("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({
  nativeMenu: !$(this).is(':checked')
});
    });

});