javascript - HTML 1st option in select is not render selected item on page Jquery mobile?

Question

I have problem with html select when I bind the json to html select it will not show the 1st item on web page when I load the page first time

Html

 <div data-role="collapsible-set" id="poset">
<div data-role="collapsible" data-collapsed="false">
<h3>OP Select</h3>
<div class="ui-grid-b">
   <div class="ui-block-a">
      <div style="padding-top: 15px;">Vendor #</div>
   </div>
   <div class="ui-block-b">
      <select id="vendorno">
      </select>
   </div>
   <div class="ui-block-c">
      <button type="submit" id="chooseVendor">Select</button>
   </div>
</div>
<div class="ui-grid-b" id="poGrid">
   <div class="ui-block-a">
      <div style="padding-top: 15px;">PO #</div>
   </div>
   <div class="ui-block-b">
      <select id="POno">
      </select>
   </div>
   <div class="ui-block-c">
      <button type="submit" id="choosePONum">Select</button>
   </div>
</div>

javascript

$('#poGrid').hide();
$('#poInfos').hide();
var rootURLgetVendornosList = "webresources/vendors/getVendornosList";
//var rootURLgetVendornosList = "http://:8080/Info5059Case2v-war/webresources/vendors/getVendornosList";


$.getJSON(rootURLgetVendornosList,null,function(data,status,jqXHR){
        renderVendorList(data);
    }).error(function(jqXHR,textStatus,errorThrown){
        console.log(textStatus+"-"+errorThrown);
    });
//bind select #vendorno
function renderVendorList(data)
{
    $(data).each(function(){
        $('#vendorno').append("<option>"+ this +"</option>");
    });
}




var rootURL3 = "webresources/PO/";
//var rootURL3 = "http://:8080/Info5059Case2v-war/webresources/PO/";


//bind select op select 
 $("#chooseVendor").click(function(){
    $.getJSON(rootURL3 + "getALLPOForVendor/" + $('#vendorno').val(),null,function(data,status,jqXHR){
        renderPOList(data);
    }).error(function(jqXHR,textStatus,errorThrown){
        console.log(textStatus+"-"+errorThrown);
    });

});//chooseVendor
//bind select POno
function renderPOList(data)
{
        $(data).each(function(){
        $('#POno').append("<option>"+ this.ponumber +"</option>");
    });
     $('#poGrid').show();
}

Answer 1

After appending items into select menu, you need to re-enhance / re-apply JQM styles. For select menu, call the below.

$(".selector").selectmenu("refresh");

Reference: Selectmenu widget API