How to retain javascript variables after postback of an updatepanel?

after a user changes a select element which triggers a postback of an updatepanel, I'm trying to set the value of that same select to the selected value after the postback has completed, but somehow the value of the value I set in a hidden field is lost after the postback.

function countrypostback() {
$('#countryid').val($('select[name="countryselect"]').val());
__doPostBack('upnlSearch', '');
}

$(document).ready(function () {
$.ajax({
type: "GET",
url: "/service.svc/countries/",
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
for (var i in msg) {
var resultitems = '<select onchange="countrypostback();" class="textbox" name="countryselect" id="countryselect">';
for (var i in msg) {
if (msg[i].name != '') {
resultitems += '<option value="' + msg[i].value + '">' + msg[i].name + '</option>';
}
}
resultitems += '</select>';
$('#countryselect').html(resultitems);
}
}
});

//here I'm trying to set the value of the dropdown to the value that was selected before the postback
$("#countryselect").val($('#countryid').val());

<input type="hidden" id="countryid" name="countryid" />

<asp:UpdatePanel ID="upnlSearch" runat="server">
<ContentTemplate>


<span id="countryselect"></span>

</ContentTemplate>
</asp:UpdatePanel>

I tried placing the hidden field countryid both outside and inside the updatepanel, but that does not make a difference, I still have an empty formfield when I try to access it via

$('#countryid').val()

I'd rather not work with viewstate (if at all possible) since that increase that pageload.