用jQuery做无刷新DropDownList后，再邦定GridView,全乱了解决方案

用jQuery做无刷新DropDownList后，再邦定GridView,全乱了
用jQuery做无刷新DropDownList后，再根据DropDownList的选项值，查询后邦定GridView，结果是DropDownList全乱了。比如，我选洲，页面无刷新填充国家的项，然后我按查询按钮"Bing City into GridView"，可是国家下拉中的项又被初始为空用jQuery做无刷新DropDownList后，再邦定GridView,全乱了解决方案。哪们大侠帮忙看看。数据库3个表：洲、国家、城市
Continents Table

Countries Table

Cities Table

test1.aspx.vb代码在ftp://220.160.203.232

test1.aspx代码：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test1.aspx.vb" Inherits="ERP_WEB.test1" EnableEventValidation="false" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>CCGV1</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script type = "text/javascript">
$(document).ready(function () {

$("#ddlContinents").change(function () {
PopulateContinents();
PopulateCities();
});
$("#ddlCountries").change(function () {
PopulateCities();
});
});
var pageUrl = '<%=ResolveUrl("~/test1.aspx")%>'
function PopulateContinents() {
//$("#<%=ddlCountries.ClientID%>").attr("disabled", "disabled");
if ($('#<%=ddlContinents.ClientID%>').val() == "0") {
$('#<%=ddlCountries.ClientID %>').empty().append('<option selected="selected" value="0">Please select3</option>');
$('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select3</option>');
}
else {
$('#<%=ddlCountries.ClientID %>').empty().append('<option selected="selected" value="0">Please select4</option>');
$('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select4</option>');
$.ajax({
type: "POST",
url: pageUrl + '/PopulateCountries',
data: '{continentId: ' + $('#<%=ddlContinents.ClientID%>').val() + '}',

contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnCountriesPopulated,
failure: function (response) {
alert(response.d);
}
});
}
}

function OnCountriesPopulated(response) {
PopulateControl(response.d, $("#<%=ddlCountries.ClientID %>"));
}
</script>


<script type = "text/javascript">
function PopulateCities() {
$("#<%=ddlCities.ClientID%>").attr("disabled", "disabled");
if ($('#<%=ddlCountries.ClientID%>').val() == "0") {
$('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select5</option>');
}
else {
$('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
$.ajax({
type: "POST",
url: pageUrl + '/PopulateCities',
data: '{countryId: ' + $('#<%=ddlCountries.ClientID%>').val() + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnCitiesPopulated,
failure: function (response) {
alert(response.d);
}
});
}
}

function OnCitiesPopulated(response) {
PopulateControl(response.d, $("#<%=ddlCities.ClientID %>"));
}

</script>


<script type = "text/javascript">
function PopulateControl(list, control) {
if (list.length > 0) {
control.removeAttr("disabled");
control.empty().append('<option selected="selected" value="0">Please select_JAVA</option>');
$.each(list, function () {
control.append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
else {
control.empty().append('<option selected="selected" value="0">Not available<option>');
}
}
</script>

</head>
<body>
<div >
<form id="form1" runat="server">
<div >
Continents:<asp:DropDownList ID="ddlContinents" runat="server" AppendDataBoundItems="True">
<asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>
</asp:DropDownList>
<br /><br />
Country:<asp:DropDownList ID="ddlCountries"
runat="server" ToolTip="ggggggg" EnableViewState="False">
<asp:ListItem Text = "Please select2" Value = "0"></asp:ListItem>
</asp:DropDownList>
<br /><br />
City:<asp:DropDownList ID="ddlCities" runat="server"
EnableViewState="False">
<asp:ListItem Text = "Please select1" Value = "0"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="85px" Rows="2"

TextMode="MultiLine" Width="1457px"></asp:TextBox>
<br />
</div>
<asp:Button ID="btnSubmit" runat="server" Text="Bing City into GridView" />

<asp:GridView ID="GridView1" runat="server"
CellPadding="4" ForeColor="#333333" AutoGenerateColumns="False">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="ContinentName" HeaderText="ContinentName" SortExpression="ContinentName" />
<asp:BoundField DataField="CountryName" HeaderText="CountryName" SortExpression="CountryName" />
<asp:BoundField DataField="CityName" HeaderText="CityName" SortExpression="CityName" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>

</form>
</div>
</body>
</html>

[解决办法]
<asp:Button ID="btnSubmit" runat="server" Text="Bing City into GridView" />
<asp:GridView ID="GridView1" runat="server" >....</asp:GridView>
放到updatepanel里面

用jQuery做无刷新DropDownList后再邦

热点推荐