Implement Cascading DropDownList on Client Side using JavaScript

I am working with two drop down in which which I hide some option on id base if id same then show that option other option should be hide.its work fine randomly changing no issues with respect to changing . Problem is that when I hide these option I can excess it with down key option Means when I change the country name in first dropdown like Pakistan in the other dropdown show Pakistan city name it works fine but when I change city name with down then Agra And Dahli should be open in city dropdown.

I want when I select Pakistan from first dropdown then I can’t access any other city in second drop down in any condition (when I press key down ,key up,or using cursor) Following my code. Java script function:

<script type="text/javascript">
       $(function () {
           ChangePlaces();
       });
       function ChangePlaces() {
           var country = document.getElementById('ddlCountries').value;
           var ddlPlaces = document.getElementById('ddlPlaces');
           var placesOptions = ddlPlaces.getElementsByTagName("option");
           for (var i = 0; i < placesOptions.length; i++) {
               if (country != placesOptions[i].value && placesOptions[i].value != 0) {
                   placesOptions[i].style.display = "none"
               }
               else {
                   placesOptions[i].style.display = "block"
               }
           }
           return false;
       }
    </script>

Html code.
<div>
        <table class="style1">
            <tr>
                <td>
                    Country :
                </td>
                <td class="style2">
                    <asp:DropDownList ID="ddlCountries" runat="server" Height="26px" Width="153px" onchange="return ChangePlaces()">
                        <asp:ListItem Value="0" Selected="True">--Select--</asp:ListItem>
                        <asp:ListItem Value="1">Pakistan</asp:ListItem>
                        <asp:ListItem Value="2">India</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    Place :
                </td>
                <td>
                    <asp:DropDownList ID="ddlPlaces" runat="server" Height="29px" Width="171px">
                        <asp:ListItem Value="0" 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>
                </td>
            </tr>
        </table>
    </div>
</div>

Please help how I solve that problem my hideen value cann’t excess any condtion using java script function.