Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Seletores de Contatos - Opção não selecionada

Tudo bem pessoal? Alguém pode me ajudar? Fiz tudo conforme os vídeos, mas não aparece a opção Tipo de Solicitação já selecionada. Se por acaso selecionar a opção 'Casa' ou "Mansão', quando dou um refresh na página ela carrega com uma dessas opções, menos a opção 'Tipo de Solicitação'. Segue abaixo meus códigos. Estou usando o firefox.

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/home/Documentos/bootstrap/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/home/Documentos/bootstrap/bootstrap/css/estilos.css">
</head>
<body>

    <section class="container">
        <h2>Sobre Nós</h2>
        <img class="img-responsive" src="img/empresa.jpg" alt="">

        <div class="panel-group" id="paineis-sobre">
            <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#primeiro-paragrafo" data-parent="#paineis-sobre">
                    <h3 class="panel-title">Desde 1935</h3>
                </div>

                <div class="collapse in" id="primeiro-paragrafo">
                    <div class="panel-body">
                        Desde 1935 trazendo casas, mansões e prédios lindos para o mundo
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-sobre">
                    <h3 class="panel-title">Alegria em colaborar para um mundo mais bonito</h3>
                </div>

                <div id="segundo-paragrafo" class="collapse">
                    <div class="panel-body">
                        Trazendo alegria para a vida das pessoas que tem dinheiro para gastar.
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#terceiro-paragrafo" data-parent="#paineis-sobre">
                    <h3 class="panel-title">Mais de 300 prêmios em design e em conforto.</h3>
                </div>

                <div id="terceiro-paragrafo" class="collapse">
                    <div class="panel-body">
                        Mais de 5 milhões de clientes satisfeitos em todo o mundo.
                    </div>
                </div>
            </div>
        </div>

    </section>

    <div class="jumbotron">
        <div class="container">
            <h3>Mais de 300 prêmios em design e em conforto.</h3>
            <p>Mais de 5 milhões de clientes satisfeitos em todo o mundo.</p>
        </div>
    </div>

    <section class="container">
        <h2>Nossos Projetos</h2>

        <figure class="thumbnail">
            <img src="img/projetos/casa-castelo.png" alt="">
            <figcaption class="caption">
                <h3>Casa Castelo</h3>
                <p>
                    A Casa Castelo é o último lançamento da TopCasaFina Arquitetura, feita para um monge.
                </p>
            </figcaption>
        </figure>

        <figure class="thumbnail">
            <img src="img/projetos/casa-lago.png" alt="">
            <figcaption class="caption">
                <h3>Casa Castelo</h3>
                <p>
                    A Casa do Lago foi lar de inúmeras pessoas que conheciam o presidente da época.
                </p>
            </figcaption>
        </figure>

        <figure class="thumbnail">
            <img src="img/projetos/mercado-marapira.png" alt="">
            <figcaption class="caption">
                <h3>Casa Castelo</h3>
                <p>
                    O mercado Marapira foi projetado nos mínimos detalhes na arquitetura baseada em frutas.
                </p>
            </figcaption>
        </figure>

        <figure class="thumbnail">
            <img src="img/projetos/palacio-dionisio.png" alt="">
            <figcaption class="caption">
                <h3>Palácio Dionísio</h3>
                <p>
                    O palácio Dionísio foi eleito pela revista 'Grandes palácios' como o palácio mais lindo do mundo.
                </p>
            </figcaption>
        </figure>

        <figure class="thumbnail">
            <img src="img/projetos/residencia-ludi.png" alt="">
            <figcaption class="caption">
                <h3>Residência Ludi</h3>
                <p>
                    A residência Ludi foi projetada para ser a mais bela casa de São Paulo pela revista Housing.
                </p>
            </figcaption>
        </figure>
    </section>

<section>
    <h2 class="container titulo-depoimentos">Depoimentos de clientes</h2>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="/home/Documentos/bootstrap/img/depoimentos/depoimento0.png">
          <div class="carousel-caption">
          <h3>Yuri Padilha</h3>
          <p>Gostei muito e achei rápido o serviço.</p>
          </div>
        </div>
        <div class="item">
          <img src="/home/Documentos/bootstrap/img/depoimentos/depoimento1.png">
          <div class="carousel-caption">
          <h3>Fernando Stafaneni</h3>
          <p>Excelente trabalho.</p>
          </div>
        </div>
        <div class="item">
          <img src="/home/Documentos/bootstrap/img/depoimentos/depoimento2.png">
          <div class="carousel-caption">
          <h3>Caio Sauzas</h3>
          <p>Gostei muito, competência em primeiro lugar!</p>
          </div>
        </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</section>

<section class="container">
    <h2>Video institucional</h2>
    <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/i_3Pv1AygeI" frameborder="0" allowfullscreen></iframe>
      </div>
</section>

<section>
    <h2>Contato</h2>
    <p>Entre em contato conosco</p>
    <form>
        <div class="form-group">
            <label for="contato-name">Nome:</label>
            <div class="input-group">
                  <div class="input-group-addon">@</div>
                 <input class="form-control" id="contato-name" type="text" name="" placeholder="Seu nome">
            </div>
        </div>
        <div class="form-group">
            <label for="contato-email">Email:</label>
            <div class="input-group">
                  <div class="input-group-addon">@</div>
                <input class="form-control" type="email" id="contato-email" placeholder="Seu email">
            </div>            
        </div>

        <div class="grupo-radio">
            <div class="radio">
                <label>
                    <input type="radio" name="tipo-de-pessoa" checked>
                    Pessoa Física
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="tipo-de-pessoa">
                    Pessoa Juridica
                </label>
            </div>
        </div><!--

        --><select class="contato-select">
            <option disabled selected>Tipo de solicitação</option>
            <option>Apartamento</option>
            <option>Casa</option>            
            <option>Mansão</option>        
        </select>
    <button type="button" class="btn btn-primary">Enviar</button>

    </form>

</section>

    <script src="/home/Documentos/bootstrap/jquery.js"></script>
    <script src="/home/Documentos/bootstrap/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
#paineis-sobre {
    margin-top: 20px;
}

.titulo-depoimentos {
    background-color: #0275D8;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #FFF;
    margin-bottom: 0;
    font-size: 24px;
}

.contato-select,
.grupo-radio {
    width: 50%;
    display: inline-block;
    vertical-align: top;

}

.grupo-radio .radio:first-child {
margin-top: 0;

}
3 respostas

Opa Rozenildo, td bem?

Eu copiei e colei seu código e funfou !

Vc poderia tirar um print de como está aparecendo esse seu select na página?

Abraços!

solução!

Boa tarde, Rozenildo! Tudo certo? =)

Parece que o Firefox possui um bug com relação ao atributo selected em uma <option>, mesmo. Eu peguei o código que você escreveu e testei no Chrome, rodou sem problemas... Você poderia depois verificar se consegue rodar em outros browsers? =)

E mais uma coisa, sobre o refresh que você realizou, é um comportamento padrão do Firefox, também... Ele preserva a última opção seleciona intencionalmente. O que você pode fazer é um hard-refresh (CTRL + F5) que ele deve voltar ao valor inicial...

Espero ter ajudado, mas qualquer dúvida, posta aqui que ajudaremos. =)

Abraço e bons estudos,

Fábio

Valeu, Fábio! Funcionou conforme sua dica.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software