select中的HTML第一个选项不会渲染页面Jquery mobile上的选定项目？ [英] HTML 1st option in select is not render selected item on page Jquery mobile?

问题描述

当我将json绑定到html时，我选择html选择时不会显示网页上的第一项。 img src =https://i.stack.imgur.com/Gl2Gy.pngalt =在这里输入图片描述>

Html

 < div data-role =collapsible-setid =poset> 
< div data-role =collapsibledata-collapsed =false> 
< h3> OP选择< / h3> 
< div class =ui-grid-b> 
< div class =ui-block-a> 
< div style =padding-top：15px;>供应商＃< / div> 
< / div> 
< div class =ui-block-b> 
< select id =vendorno> 
< / select> 
< / div> 
< div class =ui-block-c> 
< button type =submitid =chooseVendor>选择< / button> 
< / div> 
< / div> 
< div class =ui-grid-bid =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 =submitid =choosePONum>选择< /按钮> 
< / div> 
< / div> 
  

javascript

  $（ '＃poGrid'）隐藏（）; 
 $（'＃poInfos'）。hide（）; 
 var rootURLgetVendornosList =webresources / vendors / getVendornosList; 
 // var rootURLgetVendornosList =http：//：8080 / Info5059Case2v-war / webresources / vendors / getVendornosList; 
 
 $ b $ .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 /; 
 
 
 // select select op select b $ b $（＃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 
函数renderPOList（data）
 {
 $（data）.each（function（）{
 $（'＃POno'）。append（< option>+ this.ponumber +< / option>）; 
}）; 
 $（'＃poGrid'）。show（）; 
} 
  

解决方案

，您需要重新增强/重新应用JQM样式。对于选择菜单，请调用下面的内容。

  $（。selector）。selectmenu（refresh）; 
  

参考： Selectmenu widget API

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();
}

解决方案

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

这篇关于select中的HTML第一个选项不会渲染页面Jquery mobile上的选定项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！