Jquery :: Sending Array From Multiple Selection Box To Server

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. 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']);
?>