Autopopulate Select Dropdown Box Using jQuery

In this tutorial, we will dynamically populate a select dropdown box using jQuery.

A sample usage of this is when we have a list of countries and we want display its corresponding cities in another select box.

Here is the live DEMO of Autopopulate Select Dropdown Box Using jQuery.

HTML head

Let us include our jquery file in our <head> area.

{code type=”php”}
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
{/code}

HTML body

We will be needing two dropdown select boxes. The first one(#selection) would contain the list of categories and the second(#selectionlist) would be the result list.

The #result paragraph would contain our notification message.

{code type=”html”}
<p>
Select Dropdown
</p>
<p>
<select id=”selection”>
<option value=””>
– Select Item Here –
</option>
<option value=”food”>
List of Food
</option>
<option value=”animals”>
List of Animals
</option>
<option value=”flowers”>
List of Flowers
</option>
</select>
</p>
<p>
DropDown Result
</p>
<p>
<select id=”selectionresult”></select>
</p>
<p id=”result”>&nbsp;</p>
{/code}

jQuery Script

On page load, we would hide our #selectionresult using the hide() jquery function.

Our AJAX request is triggered whenever we select a value in our dropdown box using the change() jquery function. When we send a request, we set our #result to “Retrieving …” to notify the user that we are already sending a request to our remote file.

Once we receive the response from our remote file, we will insert the response text msgin our #selection usinghtml() jquery function. If the msgresult is empty, we will simply display a notification message like “No item result”.

{code type=”php”}
<script type=”text/javascript”>
$(document).ready(function(){
$(“#selectionresult”).hide();

$(“#selection”).change( function() {
$(“#selectionresult”).hide();
$(“#result”).html(‘Retrieving …’);
$.ajax({
type: “POST”,
data: “data=” + $(this).val(),
url: “demo/jquery-autopopulate-select-dropdown-box-response.php”,
success: function(msg){
if (msg != ”){
$(“#selectionresult”).html(msg).show();
$(“#result”).html(”);
}
else{
$(“#result”).html(‘<em>No item result</em>’);
}
}
});
});
});
</script>
{/code}

PHP

Here is the content of our remote file.

In $expectedValues we created an array list of our expected values, hence, if the posted value from our main page is not found in this array, we will return an empty message.

The $selectionArr contains the list of items for each data entry. We call the array index of our selected data. Once selected, using foreach, we will run a loop in the list of data under our selected array and echo each inside the <option> tag. In this way, our main page will be able to retrieve our data in HTML form and is ready to be inserted in our <select> tag.

{code type=”php”}
$expectedValues = array(“food”, “animals”, “flowers”);

$selectionArr[‘food’] = array(‘pizza’, ‘spaghetti’, ‘rice’);
$selectionArr[‘animals’] = array(‘cat’, ‘dog’, ‘girrafe’, ‘pig’, ‘chicken’);
$selectionArr[‘flowers’] = array(‘rose’, ‘sampaguita’);

if (isset($_POST[‘data’]) and in_array($_POST[‘data’], $expectedValues)){
$selectedArr = $selectionArr[$_POST[‘data’]];

foreach($selectedArr as $optionValue){
echo ‘<option>’ . $optionValue . ‘</option>’;
}
}
{/code}

Recommended Posts