Cannot Empty Dropdown On Page Transitions Jquery Mobile - jquery-mobile

Question

I am having an issue using a single page approach. When I move to my "filter page" I want to populate a list of applications via ajax i simulated the call here.
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);
}
Clicking apply puts me to another page, then when I go back to the filter page the application list Appends a new set of data. Eventhough I tell it to empty the dropdown first. Also selecting an application in the dropdown is suppose to add the selection to another listview on the page
$('#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();
What happens on subsequent visits is when you select an application from the dropdown it puts 2 of the same entries in the listview on the second visit and 3 entries every 1 one selection on the 3rd visit to the page and so on.
It seems that the DOM is caching its contents or something and i cannot stop it?
I started a jfiddle for this but my function to populate the list isnt running. I just started using jfiddle so maybe I have the simulation setup incorrectly?
http://jsfiddle.net/D2gbq/27/

Answer 1

It looks like you are emptying the selects, then refreshing the listview, and then appending the new options. You need to refresh the listview after you append the options in order to make them appear.
Try this:
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');
}