Untitled

<!DOCTYPE html>
<html lang="en">

<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <meta charset="utf-8" />
    <title></title>

    <style>
.busca {
    float:left;
}
.teste{

align-items: center; display: flex; flex-direction: row;flex-wrap: wrap;
             justify-content: center;


}


</style>
</head>
<body>


<select  id="teste2" >
 <option value="1">Guamiranga</option>
    <option value="2">Imbituva</option>
  <option  value=" " selected="selected">Todas</option>

</select>

<div id="resultadoempre"></div>


<select  id="testes" >
        <option value="1" >Tipo1</option>
        <option value="2">Tipo2</option>
        <option value=" "selected="selected">Todas</option>
    </select>


<div id="resultado"></div>


<script>


$( "#testes" ).change(function () {
     var str = this.value;

    var url = "http://localhost/site?cidade="+str;
$.getJSON( url, function( data ) {
//console.log(data);

$( "#resultado" ).empty();
for (var i = 0; i <data.length; i++) {


   $( "#resultado" ).append('<li>' +data[i]['nome'] + ' é ' + data[i]['tipo'] +'</li> <img  src="http://localhost/site/'+data[i]['Imagem']+'">' );

}


});

  });


$( "#teste2" ).change(function () {
    var cidade2 = this.value;

  var url = "http://localhost/?cidade_vaga="+cidade2;
   var jqxhr2 = $.getJSON( url, function( data ) {


  jqxhr2.fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
  })


$( "#resultadoempre" ).empty();
for (var i = 0; i <data.length; i++) {


$( "#resultadoempre" ).append('<div data-role="collapsible"> <h3>'+data[i]['nome']+'</h3><p>'+data[i]['Tipo'] +data[i]['cidade'] +   ' </p> <div data-role="collapsible"><h4>Descrição</h4><p>'+data[i]['Descrição']+ ' </p></div>  </div>'
);


}


});

  });


    </script>

</body>
</html>