Redirect to specific paragraph on DropDownList change using jQuery in ASP.Net

rajeesh

SOLVED CLOSED ACTIVE ANSWERED
User: rajeesh
Posted: on Jun 17, 2019 12:09 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 1708
Sample Code: Download

Dear sir,

I have a drop-down list. I need go to necessary paragraphs in same page by clicking selected item I tried your before direction and snippet but it is not working

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 2

Reply
ANSWER
User: pandeyism
Replied: on Jun 17, 2019 02:13 AM
Modified: on Jun 17, 2019 03:58 AM
Report

Hi rajeesh,

Refer below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#ddlSelected").change(function () {
                if ($(this).val() != '0') {
                    $('html, body').animate({
                        'scrollTop': $('#dv' + $(this).val()).offset().top
                    }, 500);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList runat="server" ID="ddlSelected">
            <asp:ListItem Text="Select" Value="0" />
            <asp:ListItem Text="Home" Value="Home" />
            <asp:ListItem Text="About" Value="About" />
            <asp:ListItem Text="Services" Value="Services" />
            <asp:ListItem Text="Gallery" Value="Gallery" />
            <asp:ListItem Text="Contact" Value="Contact" />
        </asp:DropDownList>
        <hr />
        <div id="dvHome" style="height: 200px">
            <h3>
                Home Content.</h3>
        </div>
        <div id="dvAbout" style="height: 200px">
            <h3>
                About us Content.</h3>
        </div>
        <div id="dvServices" style="height: 200px">
            <h3>
                Services Content.</h3>
        </div>
        <div id="dvGallery" style="height: 200px">
            <h3>
                Gallery Content.</h3>
        </div>
        <div id="dvContact" style="height: 200px">
            <h3>
                Contact us Content.</h3>
        </div>
    </div>
    </form>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Redirect to specific paragraph on DropDownList change using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us