JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">
<div data-role="page" id="main">
    <div role="main" class="ui-content">
        <div class="ui-field-contain">
            <label for="flip">Flip it:</label>
            <select id="flip" data-role="flipswitch">
                <option value="animal">Lion</option>
                <option value="flower">Rose</option>
            </select>
        </div>
        <div class="ui-field-contain">
            <label for="flip">Change it:</label>
<a href="#" class="ui-btn ui-btn-inline" id="setlion">Set Lion</a>
 <a href="#" class="ui-btn ui-btn-inline" id="setrose">Set Rose</a>

        </div>
    </div>
</div>

JavaScript

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

    function flipChanged(e) {
        var id = this.id,
            value = this.value;
        console.log(id + " has been changed! " + value);
    }

    $("#flip").on("change", flipChanged);

    $('#setlion').on('vclick', function (e) {
        $("#flip")
            .off("change")
            .val('animal')
            .flipswitch('refresh')
            .on("change", flipChanged);
    });

    $('#setrose').on('vclick', function (e) {
        $("#flip")
            .off("change")
            .val('flower')
            .flipswitch('refresh')
            .on("change", flipChanged);
    });
});