Jquery选择列表：返回页面时显示占位符

Question

我正在开发一个phonegap项目：1个html页面，包含3个（数据角色）页面。 其中一个包含带占位符的选择列表。

当用户在下拉列表中选择一个值时，导航离开页面并返回，所选值仍然可见。 如何将列表初始化回占位符（不将占位符作为列表中的实际值）？

HTML

<label for="cadeauvoor">Idee voor</label>
<select id="cadeauvoor" name="cadeauvoor">
  <option value="" data-placeholder="true">Kies...</option>
  <option value="Anne">Anne</option>
  <option value="Arno">Arno</option>
  <option value="Christophe">Christophe</option>
  <option value="Dirk">Dirk</option>
</select>

JS

function InitNieuweTip() {
  $("#cadeauvoor").val('');
};

Answer 1

您可以将其绑定到pageshow或pagebeforeshow：

$(document).on('pagebeforeshow', '#page_id', function () {
  $('#cadeauvoor option:eq(0)').prop('selected', true);
  $('#cadeauvoor').selectmenu('refresh');
});

option:eq(0)是selectmenu中的第一个选项（占位符）。