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.