jQuery--Sending an array from muliple selection box to server using ajax function

[Chad Gary]

I have a selection box that allows me to select muliple items. I'm trying to use the click event handler to send an array of multiple selections back to the server using the $.ajax function and I'm having some issues. Please help. Below is my html, javascript code, and PHP server-side code:

HTML CODE:

<label>Select a Color</label><br/>
<select name="ddl" id="multiple" size=9 multiple>
<option value='blue'>Blue</option>
<option value='green'>Green</option>
<option value='red'>Red</option>
<option value='yellow'>Yelllow</option>
<option value='white'>White</option>
<option value='brown'>Brown</option>
<option value='black'>Black</option>
<option value='orange'>Orange</option>
<option value='purple'>Purple</option>
</select> 
<input name="btn" id="btn" type="button" value="Submit" /><br/><br/><br/>
<div></div>

JAVASCRIPT CODE:

$(document).ready
 (
   function()
	{
		$('#btn').click
		(
			function()
			{
				$.ajax
				({
					type: "POST",
					url:  "phpMultiple.php",
					data: {data: $('#multiple :selected').serialize()},
					success: callback 
					
				});
			}
		);
	}
 );


function callback(data, status)
{
$("div").text(data);
}

PHP SERVER-SIDE CODE:

<?php
$data = ($_POST['data']);
?>

[ShawnCplus]

I'm having some issues.

Please elaborate.

[Chad Gary]

Please elaborate.

I can't seem to send the array to the server and I'm all most certain that

data: {data: $('#multiple :selected').serialize()},

is incorrect. Nothing is being passed to the server.