Question

我无法在jquery移动应用程序中使用选择菜单，并且我认为我会在这里发布问题，但我甚至无法在小提琴中正确显示。我以为我先解决小提琴问题。

这是我的fiddle，其中包含以下代码：

HTML

<div data-role='content'>
<table class='my-tables'>
    <caption style='text-align: left;'>Table A</caption>
    <thead>
        <TR>
            <TH align='left'>Type</TH>
            <TH align='left'>Amount</TH>
            <th colspan='4' scope='col'>
                <label for='selmenu'></label>
                <select id='selmenu' class='sel' data-native-menu='false' style='width: 100px'>
                    <option class='type1' value='type1'>type1</option>
                    <option class='type2' value='type2'>type2</option>
                    <option class='type3' value='type3'>type3</option>
                    <option class='type4' value='type4'>type4</option>
                </select>
        </TR>
        <TR>
            <TH align=l eft>Cars</TH>
            <TD>5,000</TD>
            <TD class='exhaust type1'>7000</TD>
            <TD class='exhaust type2'>6000</TD>
            <TD class='exhaust type3'>5000</TD>
            <TD class='exhaust type4'>4000</TD>
        </TR>
        <TR>
            <TH align=l eft>Trucks</TH>
            <TD>45672</TD>
            <TD class='exhaust type1'>154</TD>
            <TD class='exhaust type2'>1.1</TD>
            <TD class='exhaust type3'>3.7</TD>
            <TD class='exhaust type4'>55.2</TD>
        </TR>
        <TH align=l eft>Motorcycles</TH>
        <TD>224455</TD>
        <TD class='exhaust type1'>88</TD>
        <TD class='exhaust type2'>99</TD>
        <TD class='exhaust type3'>77</TD>
        <TD class='exhaust type4'>55</TD>
        </TR>
</TABLE>
<div data-role='footer'>
     <h4>my footer</h4>

</div>
<!-- /footer -->

jquery的

$(document).ready(function () {
$('.exhaust').hide();
$('.type1').show();

$('.sel').change(function () {
    $('.exhaust').hide();
    $('.' + this.value).show();
    $('.sel').val(this.value);
});
});

为什么我的小提琴甚至不会显示jqm样式？我在stackoverflow中研究了类似的问题，发现this question on the same thing，但我的小提琴页面没有显示该问题中给出的示例中可用的选项。

我错过了什么？

Answer 1

两件事：

使用jQuery 1.8.3库。包含的外部资源JQM 1.2.0不适用于更高版本。
使用HTTPS加载外部资源：

https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

在那之后，你的小提琴应该有效。

<强>更新

除此之外，一旦你选择了jQuery 1.8.3版本，小提琴将在框架选择菜单下面为你提供JQM库。因此，无需包含外部文件。

jquery mobile不在jsfiddle中显示

1 个答案: