Question

mobiscroll文档说明

此预设增强了常规HTML选择，以使用滚动条选择值。原始选择被隐藏，而虚拟输入则可见。 select的值由预设值维护。

它们提供的示例HTML代码使用内联样式来隐藏原始选择元素

<select name="City" id="select" style="display:none">

然而，当我这样做并设置了mobiscroll替换以显示内联

$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});

我发现尽管滚动条出现了但我仍然看起来像上面的输入元素。这不会发生在他们的演示代码中，但我注意到他们所做的就是这样的

<div id="select_cont" style="display: none;">
<select name="City" id="select">

但这只是隐藏了一切，包括mobiscroll替换。在封面下我发现了调用

$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});

在DOM中引入了一个虚拟输入元素。

<input id='cities_dummy'...

我可以通过发出

来让假人隐藏起来

$('#cities_dummy').css('display','none')

创建卷轴后立即

。但是，我无法理解为什么演示代码中的工作方式不同。我注意到他们使用的是jQuery Mobile v 1.1.1，而我使用的是最新版本。

也许这个问题与版本有关？或者还有其他什么在玩？我非常感谢任何帮助。

Answer 1

我明白了。

完全归结为

inputClass:i-txt

滚动条选项设置中的

位。在演示代码中，他们可能通过脚本使用此类，具体取决于options对象中 display 属性的值。关键是这一点 - 为了让原始选择在滚动显示设置为“内联”时消失，你必须定义i-txt（或你使用的任何输入类）

.i-txt{display:none}