I've been struggling to apply jQuery Mobile styles to a select element that is dynamically filled. Even after attempting to add themes, manual styles, refreshing,
$('.ui-page-active').trigger('create');
, and more, I still can't get it to work. Here is the select element:
<select id="CandidatesListBox" data-placeholder="true" onchange="myMethod()" style="width: 100%" aria-haspopup="true" class="candidatesList" data-theme="c" ></select>
Here is how I fill it:
var geocodeOption = document.createElement('option');
//fill option
if (_isMobile) {
$('#' + geocodesList.id).append(geocodeOption);
$('select#CandidatesListBox').selectmenu();
$('select#CandidatesListBox').selectmenu('refresh', true);
}
The select dropdown itself displays the correct styles, however, nothing else does. When I add
geocodeOption.className = geocodeOption.className + ' ui-btn';
the select just appears as a select and a button, with the options lacking any styling.
I also attempted to gather insights from the jQuery forms link 1 and link 2 but had no success. My jQuery Mobile version is 1.4.2.