頁面轉換時不能清空下拉菜單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個訪問一次，第三次訪問頁面等等。

看來，DOM緩存其內容或東西，我不能阻止它？

我開始爲這個jfiddle但我的函數來填充列表不運行。我剛開始使用jfiddle，所以也許我的模擬設置不正確？

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

Answer 1

它看起來像你清空選擇，然後刷新列表視圖，然後追加新的選擇。您需要在之後刷新列表視圖，然後再添加選項以使其顯示。

試試這個：

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'); 
}