Passar um array de um select para uma url em ajax

Salve pessoal, depois de percorrer todos este fórum e outros fóruns estrangeiros, não consegui solucionar meu problema, pois tenho um select que pega dados dinâmicos vindo do value, segue os códigos:

<select id="cidade" onchange="fLoadBairro(this.value);" class="search-box__combo" multiple name="cidade[]">
<option value="" id="">Cidade</option>
<optgroup label="Cidades">

<?php
$sql = $MySQLi->query("SELECT id, cidade, uf FROM cidades ORDER BY cidade ASC");

while( $linha_1 = mysqli_fetch_array( $sql ) )

echo '<option value="'.$linha_1['id'].'">' .$linha_1['cidade'].'/'.$linha_1['uf'].'</option>';

?>

</optgroup>
</select>

E abaixo o select BAIRROS:

<select id="bairro" href="#BoxBairros" name="bairro" class="search-box__combo">
<option value="0" selected>Bairros</option>

</select>

 Mas na verdade só preciso passar os parâmetros que vem do value cidade , por exemplo no select cidade tem as cidades em seus options, são paulo, guarulhos, diadema, mas eu preciso pegar apenas o id que São Paulo seria ID 1 , Guarulhos ID 2 e assim sucessivamente, eu consigo pegar os valores num id único * cidade.value *, mas assim não consigo pegar todos os ids selecionados e enviar ao php, e pelo ajax e estou enviando assim:

function fLoadBairro(xDIV){
 with(document.busca){
ChamaAJAXDIV3("div_PesqBairros", "combo_cidades.php?id="+cidade.value);

 }
 }

Assim eu consigo enviar normalmente , mas só chega o primeiro id, tentei usar assim:

var cidade = $('#cidade').serializeArray();

Eu preciso passar esse array na url em ajax porque ela irá retornar os valores para o select BAIRROS... Mas não deu certo, qual seria a solução..