Select Display in Chrome

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

The name of the city in the select, which has all the cities, is divided with a dot, which separates the name with the acronym of 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";
    }
}}

That way it works normally for some states, but when I select other states, the select simply does not show the content, although it is there, because if I press the down arrow, I can navigate through the options and after I do so, yes select shows the values of it.

I wonder if this is a Chrome bug, because firefox works perfectly, or if it is an error in the code.

edit: html combo box fill

<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>