jQuery移动选择列表在设备/模拟器上不起作用

时间:2012-06-11 07:58:27

标签: jquery list select mobile

我目前正在使用jquery mobile / phonegap应用中的表单。在此表单中,我有两个选择列表。它们在我的桌面浏览器(firefox,safari,chrome)中运行良好。

奇怪的是,第一个也在模拟器和设备上正常打开,我可以从中选择并选择一个选项。第二个人不会打开两个选项列表中的选项列表。

我已经尝试添加任何jQM附加属性,例如:data-native-menu =“false”等等。是的,当我使用它时它突然起作用,但当然它改变了我的第二个选择列表的外观并且不再匹配第一个。

我不明白的是,为什么它在第一个列表上工作,而在第二个列表上却没有?

以下是我的表格中的重要摘录:

<!-- first select: works! -->
<h2>headline 1</h2>
<ul data-role="listview" data-inset="true">
    <li>
      <div id="titleSelectContainer" class="fullWidth form-lines clearFix">
        <div class="oneQuarter">
          <label class="labels">Anrede</label>
        </div>
        <select id="titelSelect" class="inputFields" name="titelSelect" data-mini="true">
          <option value="standard" data-placeholder="true">-- Bitte wählen --</option>
          <option value="Mr.">Herr</option>
          <option value="Mrs.">Frau</option>
        </select>
      </div>
    </li>
</ul>

<!-- second: does not work! -->
<h2>headline 2</h2>
<ul data-role="listview" data-inset="true">
  <li class="payOptions">
    <select class="inputFields payDDL" name="pay" id="paySelect" data-mini="true">
      <option value="standard" data-placeholder="true">-- Bitte wählen --</option>
      <option value="creditcard">Kreditkarte</option>
      <option value="invoice">Rechnung</option>
    </select>
  </li>
</ul>

任何解决方案?

1 个答案:

答案 0 :(得分:0)

好吧,我终于通过删除它周围的ul并将剩余选择列表的样式调整到上面的输入字段来绕过它。

结论:似乎jQM selectfields在Android中的ul中不起作用。这是我的最终代码:

<h2>Zahlungsart</h2>
  <div id="paymentSelectContainer">
      <select name="pay" id="paySelect">
          <option value="standard" data-placeholder="true">-- Bitte wählen --</option>
          <option value="creditcard">Kreditkarte</option>
          <option value="invoice">Rechnung</option>
      </select>
   </div>  

编辑:我的解决方案适用于模拟器,但是当我在设备上尝试它时,它还没有再次出现!