JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
        <h1>Select menus</h1>
        <a href="#dynamic-select" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">To Dynamic Select menus</a>
    </div>
    <div data-role="content">
        <p>
            <label for="select">Select OS:</label>
            <select name="select" id="select">
                <option value="0">Android</option>
                <option value="1">Blackberry</option>
                <option value="2">iOS</option>
                <option value="3">Windows</option>
            </select>
        </p>
        <br />
        <!-- add data-type="horizontal" -->
        <fieldset data-role="controlgroup">
            <legend>Grouped Lists:</legend>
            <label for="select1">Select OS:</label>
            <select name="select" id="select1">
                <option value="0">Android</option>
                <option value="1">Blackberry</option>
                <option value="2">iOS</option>
                <option value="3">Windows</option>
            </select>
            <label for="select2">Select price:</label>
            <select name="select" id="select2">
                <option value="0">Until $200</option>
                <option value="1">Until $300</option>
                <option value="2">Until $400</option>
                <option value="3">Until $500</option>
            </select>
        </fieldset>
        <br />
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Grouped Lists:</legend>
            <label for="select3">Day</label>
            <select name="select" id="select3">
                <option>Day</option>
                <option value="1">1</option>
                <option...

JavaScript

$('#dynamic-select').live('pageinit', function () {
    $('#create-button').click(function () {
        //open/close just for custom menus  data-native-menu="false"
        $('<select name="select" class="dynamic-select">' +
            '<option value="0">Android</option>' +
            '<option value="1">Blackberry</option>' +
            '<option value="2">iOS</option>' +
            '<option value="3">Windows</option>' +
        '</select>')
        .insertAfter('#create-button');
        $('select').selectmenu({
            create: function () {
                console.log('Creating new select menu...');
            }
        });
    });

    $('#disable-button').click(function () {
        $('select.dynamic-select').selectmenu('disable');
    });

    $('#enable-button').click(function () {
        $('select.dynamic-select').selectmenu('enable');
    });

    $('#open-first').click(function () {
        $('select.dynamic-select:first').selectmenu('open');
        setTimeout(function () {
            $('select.dynamic-select:first').selectmenu('close');
        }, 2000);

    });

});