designing4u.de Yet Another Coding Blog

jQuery drop down – loading content according to option

It was a really busy day for me today, so I came up with a simple code for displaying content according to the option our user chooses from drop down list. What we will try to accomplish is to provide a user a drop down list and load content from a remote PHP file using AJAX request. Additionally we will filter the data and display only the content relevant to the chosen option. We will also make use of chainability of jQuery and add a nice fade in effect after the text is loaded.

After we'll be done with our example, the final result should look more or less like that:

As usually don't forget to include jQuery library in the head section of your document. Let's take a closer look at the jQuery code we will use in this example:

1
2
3
4
5
6
7
8

$(document).ready(function(){
  $('#select').change(function() {
    var option = $(this).val();
    $.get('select.php', {select:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });
  });
});

I think I don't need to remind anyone that you should place this code also in the head section of your document. Our goal is to write unobtrusive code though.

Our code is really simple this time. After the DOM is loaded we add an event listener, which will be triggered on onchange event of our drop down list with id select. If the event was triggered we save the value of chosen option in 'option' variable and use the AJAX request to get the content of the remote file, which in our case is select.php, which should be placed in the same directory. Additionally we pass an argument, which in our case is the value of the chosen option. We then use html() to past retrieved data into our div container with id result, we hide it and use fadeIn() effect to display it in a nicer way.

Here is the HTML code you should put in the body section of your document:

1
2
3
4
5
6
7
8
9

<select name="select" id="select">
	<option value="">Select</option>
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
	<option value="option4">Option 4</option>
	<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>

I don't think this code needs any further explanation. Probably, what's more important, is the content of the php file:

1
2
3
4
5
6
7
8
9
10
11

if($_GET['select'] == 'option1') {
  echo 'the option you have chosen is 1';
} elseif($_GET['select'] == 'option2') {
  echo 'the option you have chosen is 2';
} elseif($_GET['select'] == 'option3') {
  echo 'the option you have chosen is 3';
} elseif($_GET['select'] == 'option4') {
  echo 'the option you have chosen is 4';
} elseif($_GET['select'] == 'option5') {
  echo 'the option you have chosen is 5';
}

Basically we display the content according to the data passed in our AJAX request. You can do everything possible with this file, for example get the information from MySQL table. Additionally you can pass more attributes in the AJAX request, which you can get either from hidden input fields or just predefine them in the function.

You can also adjust this function to load contents from remote text files or any other files you can imagine. In the case of text files though, I would name the files using the name attribute of our drop down list, save it in the variable and pass it to the AJAX request as the file name. Have fun with this one.