Передача значения select ajax запросом

Здравствуйте. Есть select в form и div который должен принять ответ от сервера. Вот html:

<table>
 <tbody>
    <td>
      <div class="select">
         <div id="countries" style="height: 170px; width: 115px;">
            <form id="countries" action="javascript:void(null);" method="get" onsubmit="getCities()">
              <p>Выберите страну:</p> 
               <select size="2" name="countries">
                 <option>Турция</option>
                 <option>Египет</option>
                 <option disabled>---------------------------</option>
               </select>
             <p><input class="to-cities" value="" type="submit"></p>
            </form>
           </div>
          </div>
         </td>
         <td>
           <div id="city" class="select_city" style="display: none">
             <div id="cities" style="height: 170px; width: 115px;"></div>
            </div>
          </td>
         </tbody>
        </table>

и такой ajax запрос:

function getCities(){
var object = document.getElementById('city');
var msg = $('#countries').serialize();
if(object.style.display == 'none'){
    object.style.display = 'block';
    $.ajax({ 
          type: 'GET', 
          url: 'http://localhost:8084/AirPlane/city.htm', 
          data: msg,
          success: function(response){
                $('#cities').html(response);
            }
        });
    };}

Не могу понять как передать выбор в селекте на сервер. уходит пустое значение