Ajax in ASP.Net

[kk12345]

I have a problem when using ajax in my web application. When event of dropdownlist is activated the data to be filled in the destination control is created duplicate and available in the top of the page. I am placing the code below
---HTML code---
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<table border="0" cellspacing="0" cellpadding="0" style="width: 725px">
<tr>
<th align="center" colspan="5" valign="middle" class="text" >
<asp:Label ID="lblErrorMsg" runat="server" CssClass="alertMsg" Width="500" ></asp:Label>
</th>
</tr>
<tr>
<th height="21" align="left" valign="middle" colspan="5">
Select Artefact Type</th>
</tr>
<tr>
<th height="29" align="left" valign="top" scope="row">
<aspropDownList ID="ArtefactType" runat="server" Width="140px"
onselectedindexchanged="ArtefactType_SelectedIndexChanged"
CssClass="formlines" AutoPostBack="true">
<asp:ListItem Value=""> -- Select --</asp:ListItem>
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4 Konfig"/>
<asp:ListItem Text="Miscellaneous" Value="Miscellaneous" />
</aspropDownList>
</th>
</tr>



<%-- <aspanel runat="server" id="FilterPanel" Visible="true" >--%>

<tr>
<th width="145" height="21" align="left" valign="middle" class="text" scope="col">
Select Project</th>
<th height="21" align="left" valign="middle" class="style1" scope="col">
Select S/W Release</th>


</tr>
<tr>

<th width="145" height="21" align="left" valign="top" scope="col">
<aspropDownList ID="ProjectsCmb" runat="server" Width="140px"
CssClass="formlines" Height="28px"
onselectedindexchanged="ProjectsCmb_SelectedIndexChanged"
AutoPostBack="True" >
</aspropDownList>&nbsp;&nbsp;
</th>
<asp:UpdatePanel ID="UpdateFilterPanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<th width="145" height="21" align="left" valign="top" scope="col">
<aspropDownList ID="SoftwareReleaseCmb" runat="server" Width="140px"
CssClass="formlines"
onselectedindexchanged="SoftwareReleaseCmb_SelectedIndexChanged"
AutoPostBack="True" >
</aspropDownList>&nbsp;&nbsp;</th>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ProjectsCmb" EventName="SelectedIndexChanged" />

</Triggers>
</asp:UpdatePanel>



</tr>
<tr>
<th valign="middle" align="center" colspan="5">&nbsp;
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
DisplayAfter="100" Visible="true" DynamicLayout="true">

<ProgressTemplate>
<asp:Image ID="Image2" border="0" ImageUrl="~/Images/loading.gif"
runat="server" Height="98px" Width="127px" />
</ProgressTemplate>

</asp:UpdateProgress>

</th>
</tr>
<tr>
<th height="21" align="left" valign="middle" class="text" scope="col" colspan="2">

<asp:Button ID="SearchArtefactsBtn" runat="server" Text="Search Artefacts"
CssClass="formlines" /></th>


</tr>
<%--</aspanel>--%>




</table>



<asp:UpdateProgress ID="udProgress" runat="server"
DisplayAfter="100" Visible="true" DynamicLayout="true">

<ProgressTemplate>
<asp:Image ID="Image1" border="0" ImageUrl="~/Images/loading.gif" runat="server" />
</ProgressTemplate>

</asp:UpdateProgress>



</form>
---------------

-- --Backend code C#--------
protected void ArtefactType_SelectedIndexChanged(object sender, EventArgs e)
{
ProjectsCmb.Items.Add("1");
ProjectsCmb.Items.Add("22");
ProjectsCmb.Items.Add("333");
ProjectsCmb.Items.Add("4444");

}
protected void ProjectsCmb_SelectedIndexChanged(object sender, EventArgs e)
{
SoftwareReleaseCmb.Items.Add("1");
SoftwareReleaseCmb.Items.Add("22");
SoftwareReleaseCmb.Items.Add("333");
SoftwareReleaseCmb.Items.Add("4444");

}
----------------------------

when u run the code and selected the first combobox artifact type the project combobox is filled and when u select the item in the project the data should be filled in s/w release ,(here I have used the ajax updatepanel for partial postback of the form) but an extra combobox is created at the top of the page and the data is filled in that control.

why another control is created of the same type?