如何用Jquery Ajax发布一个多重选择

我需要能够能够接收一个数组的categoryid:

但是我得到null?!?什么好主意吗?

[HttpPost]
public ActionResult AddChargeCategories(int[] CategoryIDs, int ChargeID)
{
    foreach (var CategoryID in CategoryIDs)
    {
        db.ChargeCategories.Add(new ChargeCategory() { CategoryID = Convert.ToInt32(CategoryID), ChargeID = ChargeID });
    }
    db.SaveChanges();
    return RedirectToAction("Edit", new { id = ChargeID });
}

<select multiple="multiple"  id="CategoriesBefore" size="@DDCategories.Count" style="width:180px;">
@foreach (var Category in DDCategories)
{
    <option value="@Category.CategoryID">@Category.Name</option>    
}
</select>
<button onclick="return AddButton()">Add</button>
<script>
function AddButton() {
alert($('#CategoriesBefore').val());
$.ajax({
    url: '@Url.Action("AddChargeCategories")',
    type: "POST",
    data: { ChargeID: $("#ChargeID").val(), CategoryIDs: $('#CategoriesBefore').val() }
});

return false;
}
</script>

   <script>           
       function AddButton() {
           $.ajax({
               url: '@Url.Action("AddChargeCategories")',
               type: "POST",
               contentType: 'application/json',
               data: JSON.stringify({ ChargeID: $("#ChargeID").val(), CategoryIDs: $("#CategoriesBefore").val() })
           }).success(function () { location.reload(true); });
           return false;           
       }       
   </script>