Show (Hide) DropDownList Items (Options) using JavaScript and jQuery in ASP.Net

 I have two dropdown list which are dependent each other. First dropdown contain the country and second contain the City .when I change the country then show the city in second  dropdown.

E.g

If a user select the country name Pakistan I bind a id with country name Pakistan like 1

The second dropdown show the Pakistan City like Lahore, Islamabad which have also bind a Id

 With all l city  like  Id=1  .now I  want the city drop down show only that city which Id is=1

Other city should be hide.

Means when I select Pakistan then other dropdown show only Pakistan city   other city should me hide and when I select the India it shows only India country on other drop down list

Following my code.

 My Html code

<div>
    
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:DropDownList ID="ddcountry" runat="server" Height="26px" 
                        Width="153px">
                     <asp:ListItem  value="--Select--" selected="True" >--Select--</asp:ListItem>
			                      <asp:ListItem value="1">Pakistan</asp:ListItem>
                                  <asp:ListItem value="2"> India </asp:ListItem>
                                </asp:DropDownList>
                </td>
                <td>
                 <%--   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>--%>
                    <asp:DropDownList ID="DropDownList1" runat="server" Height="29px" Width="171px">
                  <asp:ListItem  value="--Select--" selected="True" >--Select--</asp:ListItem>
			                      <asp:ListItem value="1">Islamabad</asp:ListItem>
                                  <asp:ListItem value="1"> Rawalpandi</asp:ListItem>
                                  <asp:ListItem value="1">Lahore</asp:ListItem>
                                  <asp:ListItem value="2"> Agra</asp:ListItem>
                                  <asp:ListItem value="2">Dahli</asp:ListItem>
                                  <asp:ListItem value="2">Mumbai</asp:ListItem>
                            
                               
                    </asp:DropDownList>
                    <asp:Button ID="Button1" runat="server" Text="Change value" OnClientClick="return datachange();"/>
                </td>
            </tr>
        </table>
    
    </div>

Jquery function 

script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $("[id*=DropDownList1]").val('1');
             $("[id*=ddcountry]").val('1');
             $("#ddcountry").change(function () {
                 var country = $("#ddcountry option:selected").val();
                 if (country == '2') {                     
                     $("[id*=DropDownList1]").val('2');
                 $("[id*=DropDownList1]").val('1').hide();------------- this code I write     to hide the  dropdown which have 1 hide please help me how I hide this option which have 1 hide 


                 }
                 else {
                     $("[id*=DropDownList1]").val('1');
                 $("[id*=DropDownList1]").val('2').hide();
to hide the  dropdown which have 2 hide please help me how I hide this option which have 1 hide 

                 }
             });
         });
        </script>

Please help me how I hide this dropdown option  on behalf of id