Getting ready

Create a blank HTML document named recipe-4.html, with the latest version of the jQuery library downloaded and ready for use.

How to do it…

Using techniques similar to those you have learned in the previous recipes, perform the following steps to make changes to the DOM based on user interaction:

How it works…

First, we instruct jQuery to attach a change event handler to the #title select input using the following code:

$(function() {
  $('#title').change(function(){

  });
}

When the user changes the selected option in the drop-down input, the change event handler is executed.

In the function argument, we can use $(this) to refer to the #title select input and then use $(this).val(); to get its selected value. Once we have this value, we can perform any action we require using JavaScript. In this example, we determine which title has been selected using a JavaScript switch statement, as shown in the following code snippet:

var titleText = "";
switch ($(this).val()) {
    case "1":
      titleText = "This is the text for title 1";
      break;
    case "2":
      titleText = "This is the text for title 2";
      break;
    case "3":
      titleText = "This is the text for title 3";
      break;
    default:
      titleText = "No Title";
}

Depending on the selected title value, we create some text which we then provide to $('#main-title').html();. This will update the #main-title header element's HTML to be the provided text.

This illustrates a very simple task of how a jQuery developer can process user input and perform an action to alter the page.

See also