Align text after choosing an option in select

Question

Hello,

Guys, I need some help lining up texts. I have a select with a list of cities, in this list there are addresses, when we select a city, only information will be shown concerning that city (Obvio rs), but the problem is what text is not aligned, it gets lost in the middle of the screen.

Example: Select the city Barueri, the address appears in the lower right corner, when it should actually appear just below the select.

Note: If you select other cities like São José dos campos, more than one address will be listed.

Print: http://prntscr.com/f376wf

Project: https://codepen.io/leonardop21/project/full/DQeLLD/

Code: https://codepen.io/leonardop21/project/editor/DQeLLD/

Answer 1

You can hide the elements that are not targets, this way:

$('select[name="list_citys"]').change(filterList);

function filterList(e) {
  var value = e.target.value;
  $(".list_citys_shop .new-citys").parent().parent().removeClass('esconder');
  if (value == "all_city") $(".list_citys_shop .new-citys").slideDown();
  else {
    $(".list_citys_shop .new-citys").slideUp();

    $(".list_citys_shop ul:not([data-category*=" + value + "])").parent().addClass('esconder');
    $(".list_citys_shop ul[data-category*=" + value + "]").find(".new-citys").stop().slideDown();
  }
}

.shop-text-h4 {
  font-size: 15px;
  color: rgb(221, 29, 57);
}

.list-unstyled li {
  font-size: 12px;
}

.esconder {
  display: none;
}

@media (min-width:980px) {
  .col-md-3 {
    height: 135px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="stores">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <img src="http://www.bluebeach.com.br/shoponline/home/lojas/BLUEBEACH-CAT.GIF" class="img-responsive">
      </div>
    </div>
  </div>
</section>

<section id="citys">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <form>
          <div class="form-group">
            <label for="sel1">Cidade</label>
            <select class="form-control" name="list_citys">
              <option value="all_city">Todas</option>
              <option value="city_sp">São Paulo</option>
              <option value="city_barueri">Barueri (Tamboré)</option>
              <option value="city_campinas">Campinas</option>
              <option value="city_guaruja">Guarujá</option>
              <option value="city_santos">Santos</option>
              <option value="city_santo_andre">Santo Andre</option>
              <option value="city_sao_campo">São Bernado do Campo</option>
              <option value="city_sao_jose_campos">São José dos Campos</option>
              <option value="city_ribeirao_preto">Ribeirão Preto</option>
              <option value="city_outlet">Outlet</option>
            </select>
            <br>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="list_citys_shop new-citys">
  <div class="container">
    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING ANÁLIA FRANCO</h4>
        </li>
        <li class="new-citys">Av. Regente Feijó, 1.739 / Piso Orquidea</li>
        <li class="new-citys">Anália Franco</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 2076-1126 / 2076-1154</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING CENTER NORTE</h4>
        </li>
        <li class="new-citys">Travessa Casalbuono, 120 / Praça Central</li>
        <li class="new-citys">Vila Guilherme</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 2252-2734</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING ELDORADO</h4>
        </li>
        <li class="new-citys">Av. Rebouças, 3.970 / 1º Piso</li>
        <li class="new-citys">Vila Guilherme</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 2252-2734</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING FREI CANECA</h4>
        </li>
        <li class="new-citys">Consolação</li>
        <li class="new-citys">Vila Guilherme</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 3472-2153</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING GRANJA VIANA</h4>
        </li>
        <li class="new-citys">Rod. Raposo Tavares, KM23 / L2</li>
        <li class="new-citys">Granja Viana</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 4613-6773</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING IBIRAPUERA</h4>
        </li>
        <li class="new-citys">Av. Ibirapuera, 3.103 / Piso Ibirapuera</li>
        <li class="new-citys">Moema</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 5536-3535></li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING INTERLAGOS</h4>
        </li>
        <li class="new-citys">Interlagos</li>
        <li class="new-citys">Moema</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 5678-2020</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING METRÔ SANTA CRUZ</h4>
        </li>
        <li class="new-citys">Av. Domingos de Morais, 2.564 / Piso L1</li>
        <li class="new-citys">Vila Clementino</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 3471-7956</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING PÁTIO PAULISTA</h4>
        </li>
        <li class="new-citys">Av. Treze de Maio, 1.947 / Piso Maestro Cardim</li>
        <li class="new-citys">Bela Vista</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 3284-2020</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">RAPOSO SHOPPING</h4>
        </li>
        <li class="new-citys">Rod. Raposo Tavares, KM14,5 / Piso Raposo</li>
        <li class="new-citys">Jardim Boa Vista</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F 11 3735-1764</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sp">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING WEST PLAZA</h4>
        </li>
        <li class="new-citys">Av. Antartica, 380 / 2º Piso</li>
        <li class="new-citys">Perdizes</li>
        <li class="new-citys">São Paulo</li>
        <li class="new-citys">F. 11 3803-8960 / 3803-9210</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_barueri">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING TAMBORÉ</h4>
        </li>
        <li class="new-citys">Av. Piracema, 669 / 1º Piso</li>
        <li class="new-citys">Tamboré</li>
        <li class="new-citys">Barueri (Tamboré)</li>
        <li class="new-citys">F. 11 4191-4881</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled position" data-category="city_campinas">
        <li>
          <h4 class="shop-text-h4 new-citys">IGUATEMI CAMPINAS</h4>
        </li>
        <li class="new-citys">Av. Iguatemi, 777 / 2º Piso</li>
        <li class="new-citys">Vila Brandina</li>
        <li class="new-citys">Campinas</li>
        <li class="new-citys">F. 19 3727-9100</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled position" data-category="city_campinas">
        <li>
          <h4 class="shop-text-h4 new-citys">PARQUE DOM PEDRO SHOPPING</h4>
        </li>
        <li class="new-citys">Av. Dr. Guilherme Campos, 500</li>
        <li class="new-citys">Santa Genebra</li>
        <li class="new-citys">Campinas</li>
        <li class="new-citys">F. 19 3209-0517</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_guaruja">
        <li>
          <h4 class="shop-text-h4 new-citys">SHOPPING LA PLAGE</h4>
        </li>
        <li class="new-citys">Av. Mal Deodoro da Fonseca, 885</li>
        <li class="new-citys">Pitangueiras</li>
        <li class="new-citys">Guarujá</li>
        <li class="new-citys">F. 13 3383-2193</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_santos">
        <li>
          <h4 class="shop-text-h4 new-citys">PRAIAMAR SHOPPING</h4>
        </li>
        <li class="new-citys">Rua Alexandre Martins, 80 / 1º Piso</li>
        <li class="new-citys">Aparecida</li>
        <li class="new-citys">Santos</li>
        <li class="new-citys">F. 13 3227-6707</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_santo_andre">
        <li>
          <h4 class="shop-text-h4 new-citys">GRAND PLAZA SHOPPING</h4>
        </li>
        <li class="new-citys">Av. Industrial, 600</li>
        <li class="new-citys">Jardim Santo André</li>
        <li class="new-citys">Santo André</li>
        <li class="new-citys">F. 11 4979-5098</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sao_campo">
        <li>
          <h4 class="shop-text-h4 new-citys">GOLDEN SQUARE SHOPPING</h4>
        </li>
        <li class="new-citys">Avenida Kennedy, 700 / 1º Piso</li>
        <li class="new-citys">Jardim do Mar</li>
        <li class="new-citys">São Bernardo do Campo</li>
        <li class="new-citys">F. 11 3135-4030</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sao_jose_campos">
        <li>
          <h4 class="shop-text-h4 new-citys">CENTER VALE SHOPPING</h4>
        </li>
        <li class="new-citys">Av. Deputado Benedito Matarazzo, 9403 / Piso Dutra</li>
        <li class="new-citys">Jardim Oswaldo Cruz</li>
        <li class="new-citys">São José dos Campos</li>
        <li class="new-citys">F. 12 3901-8270</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_sao_jose_campos">
        <li>
          <h4 class="shop-text-h4 new-citys">VALE SUL SHOPPING</h4>
        </li>
        <li class="new-citys">Av. Andrômeda, 227</li>
        <li class="new-citys">Jardim Satélite</li>
        <li class="new-citys">São José dos Campos</li>
        <li class="new-citys">F. 12 3222-1236</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_ribeirao_preto">
        <li>
          <h4 class="shop-text-h4 new-citys">RIBEIRÃO SHOPPING</h4>
        </li>
        <li class="new-citys">Av. Cel Fernando Ferreira Leite, 1.540 / Piso Mogiana</li>
        <li class="new-citys">Jardim Califórnia</li>
        <li class="new-citys">Ribeirão Preto</li>
        <li class="new-citys">F. 16 3911-3802</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_outlet">
        <li>
          <h4 class="shop-text-h4 new-citys">OUTLET SÃO PAULO</h4>
        </li>
        <li class="new-citys">Av. Nova Cantareira, 698</li>
        <li class="new-citys">Santana</li>
        <li class="new-citys">Outlet</li>
        <li class="new-citys">F. 11 2281-0011</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_outlet">
        <li>
          <h4 class="shop-text-h4 new-citys">CATARINA FASHION OUTLET</h4>
        </li>
        <li class="new-citys">Rod. Castelo Branco, KM 60</li>
        <li class="new-citys">São Roque</li>
        <li class="new-citys">Outlet</li>
        <li class="new-citys">F. 11 4130-4686</li>
      </ul>
    </div>

    <div class="col-sm-5 col-md-3">
      <ul class="list-citys list-unstyled" data-category="city_outlet">
        <li>
          <h4 class="shop-text-h4 new-citys">OUTLET PREMIUM</h4>
        </li>
        <li class="new-citys">Rod. dos Bandeirantes, KM 72</li>
        <li class="new-citys">Itupeva</li>
        <li class="new-citys">Outlet</li>
        <li class="new-citys">F. 11 4496-4656</li>
      </ul>
    </div>


  </div>
</section>

I put the whole code just for viewing, but the dots are:

CSS:

.esconder {
    display: none;
}  

Javascript

$('select[name="list_citys"]').change(filterList);

function filterList(e) {
    var value = e.target.value;
    $(".list_citys_shop .new-citys").parent().parent().removeClass('esconder');
    if (value == "all_city") $(".list_citys_shop .new-citys").slideDown();
    else {
        $(".list_citys_shop .new-citys").slideUp();

        $(".list_citys_shop ul:not([data-category*=" + value + "])").parent().addClass('esconder');
        $(".list_citys_shop ul[data-category*=" + value + "]").find(".new-citys").stop().slideDown();
    }
}