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

我做了一个快速而肮脏的例子，此时它没有造型，但这样的事情可以起作用。

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

你可以用slideDown（）和slideUp（）相应地替换show（）和hide（）来创建某种eyecandy，就像我在这里做的那样：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 2

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

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

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

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

Answer 3

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

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

3 个答案: