无法在页面转换Jquery Mobile上清空下拉列表

Question

我使用单页方法遇到问题。当我移动到我的“过滤页面”时，我想通过ajax填充应用程序列表，我在这里模拟了调用。

function populateList()
{
     $('#drpApplication').empty().listview('refresh');
     if (typeof cache["FilterCounter"] == "undefined") {

                    cache["FilterCounter"] = 1;
                }
        var listItem = "<option value=" + '\'' + '1' + '\'' + ">" + 'Name1' + "</option>";
      $('#drpApplication').append(listItem);
            var listItem2 = "<option value=" + '\'' + '2' + '\'' + ">" + 'Name2' + "</option>";
      $('#drpApplication').append(listItem2);
            var listItem3 = "<option value=" + '\'' + '3' + '\'' + ">" + 'Name3' + "</option>";
      $('#drpApplication').append(listItem3);


}

单击“应用”会将我转到另一个页面，然后当我返回到过滤器页面时，应用程序列表会附加一组新数据。虽然我告诉它先清空下拉列表。同样在下拉列表中选择应用程序是为了将选择添加到页面上的另一个列表视图

    $('#drpApplication').change(function () {

        $("#drpApplication option:selected").each(function () {
            var filterItemId = 'liApplicationName' + cache["FilterCounter"].toString();
            $('#lstApplicationList').append('<li value="' + $(this).val() + '" id="' + filterItemId + '"data-icon="delete"><a onclick="removeFilterItem(\'' + filterItemId + '\')">' + $(this).text() + '</a></li>').listview('refresh');
            cache["FilterCounter"] = cache["FilterCounter"] + 1;
        });

    }).change();

在后续访问中发生的情况是，当您从下拉列表中选择一个应用程序时，它会在第二次访问时在列表视图中放置2个相同的条目，并在第3次访问该页面时每隔1个选项放置3个条目，依此类推。

似乎DOM正在缓存其内容或其他内容，我无法阻止它？

我为此启动了一个jfiddle但是我填充列表的函数没有运行。我刚开始使用jfiddle，所以也许我的模拟设置不正确？

http://jsfiddle.net/D2gbq/27/

Answer 1

看起来您正在清空选择，然后刷新列表视图，然后附加新选项。在附加选项后，您需要刷新listview 以使其显示。

试试这个：

function populateList()
{
  $('#lstApplicationList').empty();
  $('#drpApplication').empty();

  if (typeof cache["FilterCounter"] == "undefined") {
    cache["FilterCounter"] = 1;
  }
    var listItem = "<option value=" + '\'' + '1' + '\'' + ">" + 'Name1' + "</option>";
    $('#drpApplication').append(listItem);

    var listItem2 = "<option value=" + '\'' + '2' + '\'' + ">" + 'Name2' + "</option>";
    $('#drpApplication').append(listItem2);

    var listItem3 = "<option value=" + '\'' + '3' + '\'' + ">" + 'Name3' + "</option>";
    $('#drpApplication').append(listItem3);

    $('#lstApplicationList').listview('refresh');
    $('#drpApplication').listview('refresh');
}