Cascading (Dependent) DropDownList by showing hiding items on Client Side using JavaScript and jQuery in ASP.Net

usman

SOLVED CLOSED ACTIVE ANSWERED
User: usman
Posted: on Sep 17, 2015 10:17 AM
Forum: JavaScript
Answer: 1
Views: 4380

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.

Shashika...

0 4

Reply
ANSWER
User: Shashikant
Replied: on Sep 21, 2015 05:48 AM
Report

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <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>
    <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>

Screenshot

Cascading (Dependent) DropDownList by showing hiding items on Client Side using JavaScript and jQuery in ASP.Net

Company

Explore

Follow us

Contact Us