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