Ii

Select the author as required: [ --Please Select--1T | | --Please Select-- T |

Done I

1. In the document.ready() function in the jQuery script block, attach the handler for the "change" event in the first DropDownList using bind():

$("select[id$=DropDownList1]").bind("change", function() {

► Clear the second DropDownList:

$("select[id$=DropDownList2] option").remove();

► Append a default item in the second DropDownList:

$("select[id$=DropDownList2]").append("<option value=''>--Please Select--</option>");

► Check the selected value of the first DropDownList and populate the required data in the second DropDownList:

$("select[id$=DropDownList2]").append("<option value='MA1'>Have a Little Faith</option>");

$("select[id$=DropDownList2]").append("<option value='MA2'>Tuesdays with Morrie</option>");

$("select[id$=DropDownList2]").append("<option value='MA3'>The Five People You Meet in Heaven</option>");

$("select[id$=DropDownList2]").append("<option value='PC1'>The Alchemist</option>");

$("select[id$=DropDownList2]").append("<option value='PC2'>By the River Piedra I Sat Down and Wept</option>");

$("select[id$=DropDownList2]").append("<option value='PC3'>The Pilgrimage</option>"); }

$("select[id$=DropDownList2]").append("<option value='JA1'>Pride and Prejudice</option>");

$("select[id$=DropDownList2]").append("<option value='JA2'>Emma</option>");

$("select[id$=DropDownList2]").append("<option value='JA3'>Mansfield Park</option>"); }

The complete jQuery solution is as follows:

<script type="text/javascript">

$(document).ready(function() {

$("select[id$=DropDownList1]").bind("change", function() { $("select[id$=DropDownList2] option").remove(); $("select[id$=DropDownList2]").append("<option value=''>--Please Select--</option>");

$("select[id$=DropDownList2]").append("<option value='MA1'>Have a Little Faith</option>");

$("select[id$=DropDownList2]").append("<option value='MA2'>Tuesdays with Morrie</option>");

$("select[id$=DropDownList2]").append("<option value='MA3'>The Five People You Meet in Heaven</option>");

$("select[id$=DropDownList2]").append("<option value='PC1'>The Alchemist</option>");

$("select[id$=DropDownList2]").append("<option value='PC2'>By the River Piedra I Sat Down and Wept</option>");

$("select[id$=DropDownList2]").append("<option value='PC3'>The Pilgrimage</option>");

$("select[id$=DropDownList2]").append("<option value='JA1'>Pride and Prejudice</option>");

$("select[id$=DropDownList2]").append("<option value='JA2'>Emma</option>");

$("select[id$=DropDownList2]").append("<option value='JA3'>Mansfield Park</option>"); }

Run the web page. Select any item from the first DropDownList. On "change" event, the jQuery script checks for the value of the selected element and accordingly populates the second DropDownList as shown below:

An alternative way of appending items to the DropDownList is as follows:

$("select[id$=DropDownList2]").append($("<option></option>"). val("MA3").html("The Five People You Meet in Heaven"));

See also

Getting selected text and value from ASP.NET DropDownList

Creating 'Back to Top' ASP.NET hyperlink

In this recipe, we will create 'Back to Top' ASP.NET links to scroll up to the top of the page. These links are useful when the user needs to scroll the page in case the content is more than one screenful.

Getting ready

1. Create a new web form Recipe9.aspx in the current project. Add a few div areas with some text content in the form. Also add hyperlinks below each div area as below:

<form id="form1" runat="server"> <div>

<asp:HyperLink ID="Top" runat="server"></asp:HyperLink> <div style="width:3 00px;border:solid;"> Content 1 <br />

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

<asp:HyperLink ID="HyperLink1" runat="server" CssClass="backtotoplink"></asp:HyperLink>

<div style="width:3 00px;border:solid;"> Content 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

<asp:HyperLink ID="HyperLink2" runat="server" CssClass="backtotoplink"></asp:HyperLink>

<div style="width:3 00px;border:solid;"> Content 3 <br />

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

<asp:HyperLink ID="HyperLink3" runat="server" CssClass="backtotoplink"></asp:HyperLink> </div> </form>

2. Define the css style for the hyperlinks as below:

.backtotoplink {

color:#00FF00; cursor:hand;

3. The page displays the content as shown below:

J ) Chapter 1 - Recipe 9: Creating 'Back to Top' ASP.NET hyperlink - Mozilla Firefox

File Edit Vjew History Bookmarks Tools Help w

http: //localhost: 8087/chapter l/recipe9. aspx

T Google

P t Chapter 1 - Recipe 9: Creating 'Back ... | -'■

Content 1

Lorem ipsum dolor sit amet; consectetnr adipisicing eKt: sed do eiusmod tempor incididunt at labore et dolore magna aliqua. Ut enim ad midm veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vohiptate vrelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia desemnt mollit anim id est laborum. Lorem ipsum dolor sit amet. consectetur adipisicing elit= sed do eiusmod tempor incididunt at labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vohiptate vrelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.

1. In the document.ready() function in the jQuery script block, add the innerHTML attribute to the hyperlink:

$(".backtotoplink").attr("innerHTML", "Back to Top");

2. Add the title attribute:

$(".backtotoplink").attr("title", "Back to Top");

3. Add the href attribute:

$(".backtotoplink").attr("href", "#Top");

_/ ASP.NET Hyperlinks are rendered as <a> tags on the web page.

By manipulating the href attribute of anchor tags via jQuery, we can set the ASP.NET hyperlink to point to the top of the page.

The complete jQuery solution is as follows:

<script type="text/javascript">

$(document).ready(function() {

$(".backtotoplink").attr("innerHTML", "Back to Top"); $(".backtotoplink").attr("title", "Back to Top"); $(".backtotoplink").attr("href", "#Top");

Run the web page. Scroll the page to view the contents. To go back to the top of the page, click on any of the 'Back to Top' links.

> Chapter 1 - Recipe 9: Creating 'Back to Top' A5P.NET hyperlink - Mozilla Firefox

File Edit View History Bookmarks Tools Help

asp*

0 0

Post a comment