Select Display in Chrome

Question

I have a select with UF s and another with Cities in my code. When I change UF the cities are loaded in another select. I do this through the display block and display None, on top of a set of cities, when the acronym of the UF of the city is equal to the acronym of the UF of the select, give a display block, if not, use display None.

The name of the city in select, which has all the cities, is divided with a point, which separates the name with the acronym of the UF, thus: "Vitoria.ES".

Example:

comboCidade = function(){

var comboCidade = document.getElementById('cidade');
comboCidade.options[0].selected = "true";
for (i = 0; i < comboCidade.length; i++) {
    var valor = comboCidade.options[i].value;
    var sigla = valor.split(".");

    if ($("#uf").val() == sigla[1]) {
        comboCidade.options[i].style.display = "block";
    }else{
        comboCidade.options[i].style.display = "none";
    }
}}

So it works normally for some states, but when I select other states, select simply doesn’t show the content, although it’s there, because if I hit the down arrow, I can navigate through the options and after I do that, ai yes select shows its values.

I wonder if this is a Chrome bug, because firefox works perfectly, or if it’s a code error.

Edit: html of the combo box padding

<div class="col-md-3">
        <label class="col-md-2 control-label">Cidade:</label>
        <div class="col-md-10">
            <select id="cidade" name="cidade" class="form-control">
              <option value="">Selecione</option>
                <?php
                       $sql = "SELECT * FROM cidade";
                       $pdo = new PDO('mysql:host=localhost;dbname=sae;charset=utf8', 'root', '');
                       $consulta = $pdo->query($sql);
                       $listarUf = $consulta->fetchAll();
                foreach($listarUf as $dado){
                //foreach ($Conn->query($sql) as $dados) {?>
                    <option value=<?php echo $dado['nome_cidade'].".".$dado['sigla_uf'];?> > <?php echo $dado['nome_cidade']; ?> </option>
                <?php } ?>
            </select>
        </div>
    </div>

      <div class="col-md-3">
          <label class="col-md-2 control-label">UF:</label>
          <div class="col-md-10">
              <select id="uf" name="uf" class="form-control" onchange="comboCidade()">
                <option value="">Selecione</option>
                  <?php
                         $sql = "SELECT * FROM uf";
                         $pdo = new PDO('mysql:host=localhost;dbname=sae;charset=utf8', 'root', '');
                         $consulta = $pdo->query($sql);
                         $listarUf = $consulta->fetchAll();
                  foreach($listarUf as $dado){
                  //foreach ($Conn->query($sql) as $dados) {?>
                      <option value=<?php echo $dado['sigla_uf'];?> > <?php echo $dado['nome_uf']; ?> </option>
                  <?php } ?>
              </select>
          </div>
      </div>