我从这个SO question修改了一组简单的下拉选项。如果我在jQuery(没有JQM)中运行它,它正常运行,当我添加jQuery Mobile时,HTML只在页面上闪烁,然后它变成空白,我无法弄清楚原因。如果我启用jQuery Mobile并注释掉JS的最后一行:
showTab(select.val());
它将显示所有可用选项,而不是只有一个选项的所需结果。在下面的小提琴中,选择jQuery Mobile,然后运行它,HTML会在闪烁一秒后消失。
下面的工作小提示显示它处于我想要的工作状态,在选择完成后,只显示下拉选择的选项。但我希望jQuery Mobile能够正常运行。忽略提交按钮,它还没有连接任何东西。
HTML:
<form>
<p>
<h2>Select option to create PCBID:</h2>
<select id="dropdown" name="dropdown">
<option value="pcbids" selected="selected">PCBID Single</option>
<option value="pcbidr">PCBID Range</option>
<option value="pcbidq">PCBID Quantity</option>
<option value="pcbidl">PCBID List</option>
</select>
</p>
</form>
<body>
<div id="pcbids">
<label>PCBID Single:</label>
<input type="number" placeholder="12345" title="Just enter a single PCBID number" />
</div>
<div id="pcbidl">
<label>PCBID List:</label>
<input type="textarea" placeholder="12345,70237,8901" title="Enter a comma separated list of PCBID numbers you're like to create" />
</div>
<div id="pcbidr">
<label>PCBID Range:</label>
<input type="text" placeholder="12345-12400" title="Enter a range separated by a dash (-) and no spaces" />
</div>
<div id="pcbidq">
<label>PCBID Quantity:</label>
<input type="text" placeholder="12345:100" title="Enter a starting PCBID number followed by a colon (:), followed by the sequential number you want to create" />
</div>
<label for="submit"></label>
<input type="button" id="create_button" value="Submit" />
JS:
var select = $('#dropdown');
function showTab(name) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
select.change(function () {
showTab($(this).val());
});
//comment out this last line after selecting jQuery Mobile 1.3.1 under Frameworks & Extensions above
showTab(select.val());
我已尝试在$(document.ready(function(){...}); construct
加载代码,以及$(window).load(function() {...});
加载第二个代码我可以获得显示加载JQM的整个选项列表,但是只要我选择一个,整个页面再次消失。
我错过了什么?如果它有任何区别,这一切都在Chrome中。作为参考,这里是the original fiddle I modified。
答案 0 :(得分:1)
jQuery Mobile将每个input
和button
包装在一个包含所有样式的div中。
使用$('div').not(name).hide();
时,隐藏页面中的每个div,包括input
包装器。但是,使用.show()
时,会显示父div,但所有元素仍然隐藏。相反,请隐藏以pcbid
而不是div
开头的div。
$('[id^=pcbid]').not(name).hide();
$(name).show();
<强> Demo 强>