i am working with two dropdown .first dropdown contain the name of city and second contain the country name. i here i bind id with each drop down .
<asp:DropDownList ID="ddlcity" runat="server">
<asp:ListItem value="11">Karachi</asp:ListItem>
<asp:ListItem value="11"> Lahore </asp:ListItem>
<asp:ListItem value="12">Dalhi</asp:ListItem>
<asp:ListItem value="12">Mumbay</asp:ListItem>
<asp:ListItem value="13">New yark</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlcountry" runat="server">
<asp:ListItem value="1">pakistan</asp:ListItem>
<asp:ListItem value="2">india</asp:ListItem>
<asp:ListItem value="3">Us</asp:ListItem>
</asp:DropDownList>
i want when i select the pakistan then show the pakistan city other should be hide. when i selct india then it's show only indian country please help me how i solved follwoing my code.
var Country = document.getElementById('ddlcountry');
var CountryVal = Country.options[Country.selectedIndex].text;
var City = document.getElementById('ddlcity');
var CityVal = City.options[City.selectedIndex].value;
if (CountryVal == "Pakistan")
{
CityVal = City.options[11].value;
}
if (CountryVal == "India")
{
CityVal = City.options[12].value;
}
but i cannot find the correct result please help me.