选择选项在触摸选择框时显示两次

Posted

技术标签:

【中文标题】选择选项在触摸选择框时显示两次【英文标题】:select options shown twice when select box is touched 【发布时间】:2016-08-05 15:56:37 【问题描述】:

这是一个用cordova制作的android应用程序。该表单有多个选择框。点击选择框时,选项会以原生 android 样式显示,但会闪烁。当您选择选项时,选项会消失,并且选项框上的文本不会更新。没有选择任何内容。它适用于第二次尝试。

每次尝试从选择框中选择选项都会按预期工作。有趣的是,它不必是同一个选择框。仅在 any 选择框上的每一次尝试都允许选择该选项。

使用 jquery mobile 1.4.5 和 jquery 2.2.3。 它适用于 jquery mobile 1.3.2

编辑1

Android 6.0.1

页面加载后,每个选择框都会运行一个函数来填充选项:

function populateLocationOptions() 
  $("#addLocation option").each(function() 
    if ($(this).val() != 'Option') 
      $(this).remove();
       
  ); 

  var locations = getLocationArray();

  for (var i = 0; i < locations.length; i++) 
    sLocationOption = "<option value=\"" + locations[i].id + "\">" + locations[i].name + "</option>";
    $("#addLocation").append(sLocationOption);    
   
  $("#addLocation").selectmenu('refresh', true);

定义选择框的 html 部分:

<label for="addLocation" class="select"></label>
<select name="Location" id="addLocation" data-theme="c" >
  <option value="Option" data-i18n="addpage.location">Select Location</option>
</select>

编辑2

适用于 Android 5.1.1

编辑3

在 Android 6.0.1 和 cordova 6.0.0 上重现该问题的最小示例。用cordova create做的香草样板是index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>

<title>Hello World</title>
</head>
<body>
<div data-role="page" id="add">
  <div data-role="header">
    <h1 id="addPageHeader" data-i18n="addpage.header">Flicker example</h1>
  </div>
  <div data-role="content">
    <select name="Time" id="selectTime" data-theme="c">
      <option value="Option">city</option>
      <option value="Option">Paris</option>
      <option value="Option">New york</option>
      <option value="Option">London</option>
      <option value="Option">Madrid</option>
    </select>
  </div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-id="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="#diary" data-transition="none" data-icon="bars">List</a></li>
        <li><a href="#add" data-transition="none" data-icon="plus">Add</a></li>
        <li><a href="#settings" data-transition="none" data-icon="gear">Settings</a></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

令人惊讶的是,当 data-position="fixed" 属性从 footer div 中删除时,问题就消失了。

【问题讨论】:

请分享一些代码、正在使用的安卓版本以及您认为相关的其他详细信息。 【参考方案1】:

我没有设法使用data-position="fixed" 解决这个问题。我删除了该属性并使用自定义 css 来达到相同的效果。这是一个经过调整的解决方案,在 jquery mobile 支持 data-position 属性之前使用。下面列出的 css 文件是在 jquery mobile css 之后加载的。

body,
.ui-page 
      min-height: 100% !important;
          height: auto !important;
        
.ui-content

  margin-bottom: 56px; /* footer size */


.ui-footer 
  position: fixed;
  bottom: 0;
  width: 100%;

我的直觉是,jquery mobile 无法与 Android 6.x 的 webview 一起正常工作。

【讨论】:

【参考方案2】:

我在 android 5.0.1 上测试时遇到了这个问题。

在大多数情况下,将其放在准备好的文档上可以解决问题:

$("select").on('vmousedown', function(e)  $(this).focus().click(); );

我发现问题仍然时不时出现,有时如果你很快关闭并打开选择窗口。

【讨论】:

以上是关于选择选项在触摸选择框时显示两次的主要内容,如果未能解决你的问题,请参考以下文章

如何在无法输入文本的情况下在 Select2 中使用“多个选择框”选项?

当第一个选择的项目框 1 更改时重置选项下拉菜单 2 mysql

更改html中选择框的蓝色[重复]

颜色组合框和自定义颜色选择器

从第二个子表单组合框中选择值时显示的访问 2016 参数值消息

带有自定义项目模板的组合框在选择值时显示模板而不是文本