JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div data-role="page" id="p1">
    <div data-role="content">
        <h1>Page 1</h1>
        <select class="pageSelect"></select>
        <a href="#" id="update-select-1" data-role="button">Update Select Menu</a>	
    </div>
</div>

JavaScript

function generateOptions() {
    
    var numbers = [],
        html = "";
   
    for (var i=0; i<100; i++) {
        var v = Math.random();
        numbers.push(v);
        html = html + '<option value="' + v + '">' + v + '</option>';
    };

    return {
        html: html,
        value: numbers[5]
    };
};

$(document).on('click', '#update-select-1', function() {
    var options = generateOptions(),
        select = $.mobile.activePage.find('.pageSelect');
    
    select.html(options.html);
    select.val(options.value);
    
    // This updates the select but I lose styling
    // select.selectmenu().selectmenu('refresh', true); 
    
    // This fails
    //select.selectmenu('refresh', true);
    
    // This works (from answer, adjusted)
    $.mobile.activePage.find('select[class=pageSelect]')
        .html(options.html)
        .val(options.value)
        .selectmenu('refresh', true);
});