Autopopulate Select Dropdown Box with jquery

Posted 20 March 2011 - 11:43 AM

Hi everyone,

I need help with my project. I need my dropdown box to automatically shown on page load. You can test it here: http://www.smkhutank....cc/select.html

So as you can see List of Food is not automatically shown but click on anything and select List of Food back and the food related data will be shown.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Select test</title>
        <script type="text/javascript" src="/includes/javascript/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
$(document).ready(function(){
    $("#selectionresult").show();
 
    $("#selection").change( function() {
        $("#selectionresult").show();
        $("#result").html('Retrieving ...');
        $.ajax({
            type: "POST",
            data: "data=" + $(this).val(),
            url: "select.php",
            success: function(msg){
                if (msg != ''){
                    $("#selectionresult").html(msg).show();
                    $("#result").html('');
                }
                else{
                    $("#result").html('<em>No item result</em>');
                }
            }
        });
    });
});
</script>
</head>
<p>
    Select Dropdown
</p>
<p>
    <select id="selection">

        <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>

source code: http://www.codingcer...x-using-jquery/

Any help is greatly appreciated. Thanks in advance