- 首页
- 前端开发
- 选择中的 HTML 1st 选项不会在页面 Jquery mobile 上呈现所选项目?
选择中的 HTML 1st 选项不会在页面 Jquery mobile 上呈现所选项目?
[英] HTML 1st option in select is not render selected item on page Jquery mobile?
本文介绍了选择中的 HTML 1st 选项不会在页面 Jquery mobile 上呈现所选项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我将 json 绑定到 html select 时，我遇到了 html select 问题，当我第一次加载页面时，它不会显示网页上的第一项
HTML
<div data-role="collapsible" data-collapsed="false"><h3>OP选择</h3><div class="ui-grid-b"><div class="ui-block-a"><div style="padding-top: 15px;">供应商#</div>
<div class="ui-block-b"><select id="vendorno"></选择>
<div class="ui-block-c"><button type="submit" id="chooseVendor">选择</button>
<div class="ui-grid-b" id="poGrid"><div class="ui-block-a"><div style="padding-top: 15px;">PO #</div>
<div class="ui-block-b"><select id="POno"></选择>
<div class="ui-block-c"><button type="submit" id="choosePONum">选择</button>
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){渲染供应商列表(数据)；}).error(function(jqXHR,textStatus,errorThrown){console.log(textStatus+"-"+errorThrown);});//绑定选择#vendorno函数 renderVendorList(data){$(data).each(function(){$('#vendorno').append("");});}var rootURL3 = "webresources/PO/";//var rootURL3 = "http://:8080/Info5059Case2v-war/webresources/PO/";//绑定选择操作选择$("#chooseVendor").click(function(){$.getJSON(rootURL3 + "getALLPOForVendor/" + $('#vendorno').val(),null,function(data,status,jqXHR){渲染POList(数据)；}).error(function(jqXHR,textStatus,errorThrown){console.log(textStatus+"-"+errorThrown);});});//选择供应商//绑定选择POno函数 renderPOList(data){$(data).each(function(){$('#POno').append("");});$('#poGrid').show();}
解决方案
将项目附加到选择菜单后，您需要重新增强/重新应用 JQM 样式.对于选择菜单，请调用以下.
$(".selector").selectmenu("refresh");
参考:选择菜单小部件 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
这篇关于选择中的 HTML 1st 选项不会在页面 Jquery mobile 上呈现所选项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
