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

Question

我目前正在我的 jquery mobile/phonegap 应用程序中处理一个表单。在这个表格中，我有两个选择列表。它们都可以在我的桌面浏览器（firefox、safari、chrome）中正常工作。

奇怪的是，第一个也可以在模拟器和设备上正确打开，我可以从中选择一个选项。由于某种原因，第二个不会在任何一个上打开选项列表。

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

我不明白的是，为什么它在第一个列表中起作用，而在第二个列表中不起作用？

这是我表单中重要的 sn-p：

<!-- 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>

有什么解决办法吗？

Answer 1

好的，我终于解决了这个问题，删除了它周围的 ul 并将剩余选择列表的样式调整为上面的输入字段。

结论：似乎 jQM 选择字段在 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>  

编辑：我的解决方案在模拟器上运行，但是当我在设备上尝试时，它又不行了！