Created duplicate control when used Ajax

See more:

Ajax

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---
 <pre><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">
                                <asp:DropDownList 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" />
                                </asp:DropDownList>
                            </th>
                        </tr>

                       <%-- <asp:Panel 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">
                                    <asp:DropDownList ID="ProjectsCmb" runat="server" Width="140px"
                                        CssClass="formlines" Height="28px"
                                        onselectedindexchanged="ProjectsCmb_SelectedIndexChanged"
                                        AutoPostBack="True"  >
                                    </asp:DropDownList>&nbsp;&nbsp;
                                    </th>
                               <asp:UpdatePanel ID="UpdateFilterPanel" runat="server"  UpdateMode="Conditional" >
                                <ContentTemplate>
                                    <th width="145" height="21" align="left" valign="top" scope="col">
                                    <asp:DropDownList ID="SoftwareReleaseCmb" runat="server" Width="140px"
                                        CssClass="formlines"
                                        onselectedindexchanged="SoftwareReleaseCmb_SelectedIndexChanged"
                                        AutoPostBack="True" >
                                     </asp:DropDownList>&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>
                                </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>
                        <%--</asp:Panel>--%>


                    </table>

        <asp:UpdateProgress ID="udProgress" runat="server"
            DisplayAfter="100" Visible="true" DynamicLayout="true">
            <ProgressTemplate>
            </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 combobox 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?

Note: once the data is submitted to server by clicking the button the newly created control is not visible and the data is available in the actual cotrol of the combobox. Am I missing to select any property while using the ajax updatepanel?