Send an array of a select to a URL using ajax

Question

I have a problem that I’m having a hard time solving even though it seems easy, and it would be this:

I have this select with array:

<select id="cidade" onchange="fLoadBairro();"  class="search-box__combo" multiple name="cidade[]">
    <option value="0" id="cidade">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>

Note that on the tag name:cidade[], even many know.

Now this is my ajax:

////FUNCAO PRA CRIAR AJAX
function createXMLHTTP() {
    var ajax;
    try {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
            alert(ajax);
        } catch(ex) {
            try {
                ajax = new XMLHttpRequest();
            } catch(exc) {
                 alert("Esse browser não tem recursos para uso do Ajax");
                 ajax = null;
            }
        }
        return ajax;
    }

    var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                            "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                            "Microsoft.XMLHTTP"];
    for (var i=0; i < arrSignatures.length; i++) {
        try {
            var oRequest = new ActiveXObject(arrSignatures[i]);
            return oRequest;
        } catch (oError) { 
        }
    }
    throw new Error("MSXML is not installed on your system.");
}

function ChamaAJAXDIV3(xDiv, xPagina, xVariaveis){
    var combo = createXMLHTTP();
    combo.open("post", xPagina, true);
    combo.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    combo.onreadystatechange=function(){
        if (combo.readyState==4){
            document.getElementById(xDiv).innerHTML = unescape(combo.responseText.replace(/\+/g," "));
        }
    }
    combo.send(xVariaveis);
    alert(fVariavel);
}

And finally it would be the function of Ajax that requests the URL:

var $cidade = jQuery('form'),
data = $cidade.serialize();
function fLoadBairro(xDIV){
    with(document.busca){               
        ChamaAJAXDIV3("div_PesqBairros", "combo_cidades.php?id="+data);
    }
}       
alert(+data);

See that in this function, I tried to get the array from the tag cidade[], and I’m not succeeding, but if I take the vectors from the city name tag and put it as city.value, it will only take the first value from the selected value tag from the list.

I need to take these values that are selected and send them as an array, or better there in the URL instead of going like this: combo_cidades.php?id=1, would go so: combo_cidades.php?id=1,2,3, if 3 checkboxes are selected from my select.

OBS I use the MULT-SELECT function that creates checkboxes inside the selects that everyone knows.

SUMMING UP : I need inside select when opening it, and select 3 checkbok with their values in the values, example, value:with id 1, value:with id 2 , value:with id 3, pick up and pass through the URL for me in PHP to use a explode and a foreach and separate them, then you can ask what all this, is that I want to apply this in a COMBO BOX and I need this return by PHP to generate the neighborhoods of each id selected in the city tag , since I am grateful and sorry for the giant text, is to be more clarified..