JQuery :: How to pass values to select box via ajax?

Jquery is one of the easiest and the best javascript frameworks used by millions of websites. What makes it easy is the implementation and best is that the minified version is very small in size and loads really fast making it easy for us to manage the code as well as the speed. In our article today we will examine how we can pass in the dynamic values to select box on a webpage without having to reload the entire page.

In order to pass values to a select box dynamically via the ajax using jquery we need to include the main jquery framework file into the main php file. You can download the latest version from jquery.com. To include the jquery into the file add the following line to the php page.

<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>

This is assuming that you have placed the jquery downloaded file and the version downloaded is 1.4.2 in the js folder.

The reason for using the minified version of jquery has been explained in SEO # How to manage CSS and Javascript files for better ranking? please read the article if you have not already.

The above line in the php file will include the framework needed to call the jquery for any purpose. Please keep in mind that jquery must be loaded before making a call to any function otherwise a “Not Defined” javascript error occurs. That is the reason that all calls are normally made at the end of the source code so that everything needed by the calls are already loaded.

In order to dynamically add values in the select box on the page. Create a new javascript file name it “select_box.js” and place it into the js folder and pass in the following line in the php file:

<script type=”text/javascript” src=”js/select_box.js”></script>

The same file we just created will hold the source code needed to make a call to ajax and fill in the select box.

In the newly created javascript file add the following code snippet:

$(document).ready(function() {

}

The above code snippet lets the browser know that we want to run this code once the document is ready and loaded. In the same code snippet add in the following code to make a call to remote php file on server to get the values needed for the select box.

// get sub category json…
var target = “json/get_categories.php”;
$.ajax({
url : target,
dataType: ‘json’, //remove this comment after testing…
type: ‘GET’,
success: function(data, textStatus, XMLHttpRequest)
{
$.each(data, function(index, element)
{
$.each(element, function(index, element)
{
$(“#category_id”).append(“<option value=’” + element.category_id + “‘>” + element.category_name + “</option>”);
//alert(element.category_id);
});
//alert(element);
});

In the above code we have called the remote php file named: get_categories.php which is saved in the folder named json on server. The same file will serve us with the categories from the database and return the values in json format. The json format returned from the server will contain category_id and category_name in it. We have in the above code on successful return of the data ran a loop on the json values returned and added each value to the “category_id” select box on the html page. This is assuming that you have added the following html in the php file already:

<select name=”category_id” id=”category_id” size=”1″></select>

In the server side php just run your database query to get the categories and make use of the json_encode function to return the values in the json format.

We will keep updating our Jquery Tips section every 4 days, please subscribe to our feed and also share our articles on Facebook and Google Plus so other’s can benefit from our insight. Please feel free to send us your comments below, on how we can improve.