JSFiddle - React, Tailwind, and code Playground

by rossmartin

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div id="onlyPage" data-role="page">
    <div data-role="content">
        <select name="testselectmenu" id="testselectmenu" data-mini="true">
            <option value="1">this get's bigger now !</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <br/> <a href="" id="testbutton" data-role="button" data-mini="true" data-icon="">this will get bigger</a>

        <br/>
<a href="#" id="changeButton">Click to make them bigger</a>

    </div>
</div>

JavaScript

$(function () {
    $('#changeButton').on('click', function (e) {
        // change the button (works)
        $('#testbutton').buttonMarkup({
            mini: false
        });
        // change the select menu (does not work)
        $('#testselectmenu').attr('data-mini', 'false');
        $('#testselectmenu').parent('div').attr('data-mini', 'false').removeClass('ui-mini').addClass('ui-fullsize');
        //$('#testselectmenu').selectmenu('refresh');
    });
});