任何人都可以建议使用 JQuery Mobile 选择下拉框的替代方法吗？

Question

我构建了一个基于 JQuery Mobile 的应用程序，封装在 AppMobi 中，同时发布了 iOS 和 Android 版本。迄今为止，我没有听说过任何重大问题。今天我听说一位使用 Android ICS 的用户在访问任何下拉选择框时反复出现崩溃 - 我无法用我的旧测试单元重现该问题。我也让他们尝试了我的原始 html 网站——这不会产生相同的行为，但 AppMobi 的人似乎对 JQuery Mobile 的使用持模糊看法，所以不要指望那个季度能提供太多帮助。

我的主要替代方案可能是用一些替代方案替换标准选择下拉选择框。

任何人都可以提出一个替代方案（越简单越好）来产生与以下代码相同的功能吗？

<select id="punits">
    <option value="in_H2O">in H2O</option>
    <option value="in_HG">in Hg</option>
    <option value="psi">psi</option>
    <option value="cm_H2O">cm H2O</option>
    <option value="cm_HG">cm Hg</option>
    <option value="kPa">kPa</option>
  </select>

提前谢谢你

Answer 1

按照越简单越好的顺序 - 这是一行修复： 我可以建议使用内置自定义选择菜单的 jQuery Mobile 吗？ 文档@http://view.jquerymobile.com/master/demos/selectmenu-custom

基本上使用相同的 html，但将此行添加到您的 mobileinit

$.mobile.selectmenu.prototype.options.nativeMenu = false;

这将生成由 jQuery Mobile 呈现的所有选择菜单，而不是本机控件

Answer 2

我做了一个快速而肮脏的例子，此时它没有样式，但像这样的东西可以工作。

JsFiddle运行示例：http://jsfiddle.net/29vBZ/3/

您可以相应地将 show() 和 hide() 替换为 slideDown() 和 slideUp() 以创建某种视觉效果，就像我在这里所做的那样：http://jsfiddle.net/29vBZ/6/

HTML：

<div id="customSelect"> 
    <div id="customSelectCaption"></div>
    <div class="customSelectItem" identifier="in_H2O">in H2O</div> 
    <div class="customSelectItem" identifier="in_HG">in Hg</div> 
    <div class="customSelectItem" identifier="psi">psi</div> 
    <div class="customSelectItem" identifier="cm_H2O">cm H2O</div> 
    <div class="customSelectItem" identifier="cm_HG">cm Hg</div> 
    <div class="customSelectItem" identifier="kPa">kPa</div> 
</div> 

JavaScript/jQuery：

$(document).ready(function(){
//hide the options on load
$('#customSelect').children('.customSelectItem').hide();

//give it the caption of the first option as default.
var firstChild = $('#customSelect .customSelectItem');
$('#customSelect').attr('identifier', firstChild.attr('identifier'));
$('#customSelectCaption').html(firstChild.html());

//set a variable so we know in which state it is.
$('#customSelect').data('customSelectState', false);

//bind the click event so you can take action on click.
$('#customSelect').click(function(event){
    if($('#customSelect').data('customSelectState') == false)
    {
        //hide the caption, show the items.
        $('#customSelectCaption').hide();
        $('.customSelectItem').show();

        //set the variable so we know the state is now 'open'.
        $('#customSelect').data('customSelectState', true);
    }
    else
    {
        //set the new identifier.
        $('#customSelect').attr('identifier', $(event.target).attr('identifier'));

        //set the new caption.
        var newCaption = $(event.target).html();
        $('#customSelectCaption').html(newCaption);

        //show the caption, hide the items.
        $('#customSelectCaption').show();
        $('.customSelectItem').hide();

        //set the variable so we know the state is now 'closed'.
        $('#customSelect').data('customSelectState', false);
    }
});
});

要检索当前值，您可以简单地做：

var currentSelection = $('#customSelect').attr('identifier');

Ofcource 这只适用于一个“假”下拉列表，但可以扩展为一个完整的 jQuery 插件，它对多个列表执行相同的操作。我希望这能以某种方式帮助你。

Answer 3

我最终使用了新的 (1.2) JQuery Mobile 弹出功能 (http://jquerymobile.com/demos/1.2.0/docs/pages/popup/)，带有堆叠的单选按钮。比简单的下拉选择菜单复杂一点，但在 IOS 和 Android 上都可以正常工作

Answer 4

下面提供的解决方案也适用于我，因为我当前项目中的选择选项仅显示为文本区域字段。谢谢