<select> не работает в приложении Phonegap на Android 2.3.3

Я работаю над телефоном для Android и iOS. Большинство вещей работает очень хорошо, но я испытываю проблему с тегом <select>. Он расширен с помощью jQuery mobile и на той версии Android, когда соответствующий div нажат/нажал, параметры не отображаются. Они появляются, когда я делаю два клика/нажатия:

в div, содержащем <select>
в области над div

В этом сценарии отображаются параметры и когда выбранное событие изменения запущено и выполняется привязка кода к нему.

Я нашел эти две проблемы для Android: http://code.google.com/p/android/issues/detail?id=10280 и http://code.google.com/p/android/issues/detail?id=6721

Я пробовал обходные решения, упомянутые здесь, но они ничего не меняют. Мне еще нужно сделать два клика, но это не то поведение, которое мне нужно. Мне нужен только один клик.

Проблема существует только на Android 2.3.3, и я думаю и о старых версиях. На iOS и новых андроидах все работает отлично.

Я борюсь с этой проблемой весь день и пробовал все.

Любая помощь, советы будут в значительной степени оценены. Спасибо.

Ответ 1

Вы пытались добавить в меню выбора атрибут data-native-menu = "false".

Пример:

<select name="gender" id="gender" data-theme="b" data-native-menu="false" >
    <option value="">Please specify ...</option>
    <option value="option1">Male</option>
    <option value="option2">Female</option>
    <option value="option3">Undisclosed</option>
</select>

Ответ 2

Вот что решило мою проблему. В android 2.3.x я установил z-index в поле выбора ~1000 (намного выше других элементов), и он решил проблему. По-видимому, собственный браузер запутывает "слои". Надеюсь, поможет.

Ответ 3

У меня была та же проблема, я понял, что проблема в том, что я использовал свойство data-position = "fixed" для заголовка страницы, содержащего элемент select. когда я удалил data-position = "fixed" из моего заголовка, заголовок не был зафиксирован наверняка, но избавился от этой досадной проблемы выбора не "нажал". надеюсь, что это поможет!

Ответ 4

Имея ту же самую проблему с андроидом 2.3 и сгенерированным JavaScript, я решил использовать jQuery, чтобы сфокусировать элемент после его рендеринга и каждый раз, когда он был повторно отображен (даже при использовании $.SELECT.show()).

После выполнения $( "# element" ). focus() поле выбора ведет себя нормально снова, его оба можно щелкнуть и обновить после выбора новой опции.

Ответ 5

Единственный способ, которым это сработало для меня, - добавить это на мой jQuery script:

$('select').click(function () {
    $(this).focus();
});

Ответ 6

Я пробовал все ваши предложения без везения. То, что я закончил, - не лучшее решение, но это лучше, чем альтернатива, если ничто иное не обновит окно выбора. Я сделал это с помощью jQuery следующим образом:

$(".select_box").change(function() {
    $(this).hide();
    $(".select_box").show();
});

Бум, обновленный.

Пожалуйста, помните, что это только решение, если ничего не будет работать.

Ответ 7

Убедитесь, что страница div не находится внутри другого div. Он должен выглядеть так:

<body>
  <div data-role="page">
    ...
  </div>
 </body>

НЕ нравится:

<body>
  <div>
    ...
    <div data-role="page">
      ...
    </div>
    ...
  </div>
</body>

У меня была точно такая же проблема с помощью select с data-native-menu="true", и все работало нормально, как только я удалил лишний div.

Ответ 8

Я знаю, что этот вопрос был опубликован два года назад, но на всякий случай кто-то сталкивается с этой проблемой сегодня, как это было недавно:

У меня было то же поведение, что и вы. Проблема у меня была с div, который появился как заголовок и имел атрибут data-role = "header" и data-position = "fixed". Там есть ошибка в jQuery mobile, которая вызывает ряд странных проблем в Android 2.2/2.3 (http://demos.jquerymobile.com/1.3.2/widgets/fixed-toolbars/).

Я установил, что ошибка удаляет 'data-position = "fixed" из заголовка и добавляет пользовательский класс со следующим кодом:

.custom-header{
    position: fixed !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    z-index: 999 !important;
}

Надеюсь, это поможет кому-то.