This is a JavaScript tutorial on how to populate a SELECT element’s options with an Ajax request. In this tutorial, I will be using the JQuery library.
In this example, I will be sending an Ajax request to a PHP script, which will return a list of car models in a JSON format. After that, I will take the returned JSON data and append each array element to the SELECT dropdown.
Our PHP script.
I’ve purposely kept this short and simple, as your script will probably be completely different. In the example below, I’ve created a PHP array of car models and printed it out in a JSON format:
<?php
//Example data.
$carModels = array(
'Audi', 'BMW',
'Mercedes', 'Volvo',
'Lexus', 'Jaguar'
);
//Print out the array in a JSON format.
header('Content-Type: application/json');
echo json_encode($carModels);
In your case, you will probably be selecting data from MySQL. You may also be doing a search based on form elements that the user has already filled in or changed.
Our Select element.
Once again, I have kept this example very simple:
<select id="car_models">
<option value="-" id="loading">Loading</option>
</select>
As you can see, we created a SELECT element with the ID “car_models“. We also added a default “loading” option, just to let the user know that they may have to wait a few seconds before they can select anything.
Our JavaScript / jQuery.
Now, let’s take a look at the JavaScript code that will send an Ajax request to our PHP script before populating the above SELECT element:
$(document).ready(function() {
//Make an Ajax request to a PHP script called car-models.php
//This will return the data that we can add to our Select element.
$.ajax({
url: 'car-models.php',
type: 'get',
success: function(data){
//Log the data to the console so that
//you can get a better view of what the script is returning.
console.log(data);
$.each(data, function(key, modelName){
//Use the Option() constructor to create a new HTMLOptionElement.
var option = new Option(modelName, modelName);
//Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
$(option).html(modelName);
//Append the option to our Select element.
$("#car_models").append(option);
});
//Change the text of the default "loading" option.
$('#loading').text('Select Car Model');
}
});
});
In the example above, we wrapped our request inside the $(document).ready function. As a result, our Ajax request will be executed as soon as the page has loaded and the DOM is ready. You may want to change this to suit your scenario.
For example: You might want to change the SELECT element after another SELECT element has been changed. In that case, you would modify the code above and wrap it inside the onchange event handler.
Inside the success handler of our AJAX request, we used the $.each function to loop through each element in the JSON array that our PHP script returned. We then converted each car model into an Option element before appending it to our SELECT dropdown.
Finally, after our loop finished, we changed the text of the default loading option so that the user realizes that they can now use the element.
This code will obviously need to be modified to suit your own needs and setup. If you are having issues understanding how to do that, then you should probably check out some of these beginner guides:
- Simple Ajax request with JQuery and PHP.
- Ajax search w/ PHP & MySQL.
- Printing out JSON with PHP.
- Selecting rows from MySQL.
- Change a SELECT element using JavaScript.