MobiScroll选择预置

Question

mobiscroll文档声明

此预置增强了常规的HTML选择，以使用滚动体选择值。原来的选择是隐藏的，一个虚拟的输入是可见的。select的值由预置维护。

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

<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">

但这只是掩盖了一切，包括梅比克罗的替代品。看了看被子，我发现

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

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

<input id='cities_dummy'...

我可以通过发出一个

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

在创建滚筒后立即。但是，我不明白为什么演示代码中的工作方式不同。我注意到他们使用的是jQuery移动版本1.1.1，而我使用的是最新版本。

也许这个问题与版本有关？或者这里还有什么别的事吗？我非常感谢你的帮助。

Answer 1

我想通了。这一切都取决于

inputClass:i-txt

滚动器选项设置中的位。在演示代码中，他们可能通过脚本使用这个类，这取决于options对象中display属性的值。问题在于，当滚动显示设置为“内联”时，为了使原始选择消失，必须将input (或任何您使用的输入类)定义为

.i-txt{display:none}