Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
Jack Oliveira

Tipo de Select Option

Pergunta

Ola pessoal alguem poderia me dizer de como eu faço para criar um select igual da imagem

 

 15253407_1315611258503877_4071155664433217672_n.png.e13fa871817b013d0cfd837b8329041c.png 

 

Eu vi isso em um site estrangeiro e achei top isso para reserva de hotel

 

Eu vi o codigo do select deles esta assim

 

<!--           = reservation form           /-->
      <section class="st-row" id="reservation">
        <div class="container">
          <div class="hr-heading rotate">
            <h1>Reservation</h1><small>book your unforgettable pleasure time</small>
          </div>
          <div class="row">
            <!--           ¬ form           /-->
            <div class="col-sm-6 col-md-5 col-md-offset-1 col-lg-4 col-lg-offset-2 item-sm">
              <form class="booking-form js-form-booking" action="#" method="POST" autocomplete="off">
                <div class="row row-sm">
                  <div class="form-group col-xs-12">
                    <label class="label-control">Your name <span class="label-warn">*</span></label>
                    <input class="form-control" type="text" name="name" required>
                  </div>
                  <div class="form-group col-xs-12">
                    <label class="label-control">Your e-mail <span class="label-warn">*</span></label>
                    <input class="form-control" type="email" name="email" required>
                  </div>
                  <!--         datepicker/clockpicker         *-->
                  <div class="form-group col-xs-12">
                    <div class="row row-sm input-daterange">
                      <div class="col-xs-6">
                        <label class="label-control">date from <span class="label-warn">*</span></label>
                        <input class="form-control datepicker" data-date-format="mm/dd/yyyy" name="date_from" required>
                      </div>
                      <div class="col-xs-6">
                        <label class="label-control">date to <span class="label-warn">*</span></label>
                        <input class="form-control datepicker" data-date-format="mm/dd/yyyy" name="date_to" required>
                      </div>
                    </div>
                  </div>
                  <div class="form-group col-xs-12">
                    <div class="row row-sm">
                      <div class="col-xs-6">
                        <label class="label-control">time <span class="label-warn">*</span></label>
                        <input class="form-control clockpicker js-input-time" type="text" name="time_from" required>
                      </div>
                      <div class="col-xs-6">
                        <label class="label-control">time <span class="label-warn">*</span></label>
                        <input class="form-control clockpicker js-input-time" type="text" name="time_to" required>
                      </div>
                    </div>
                  </div>
                  <!--           ¬ number-of-reversed           /-->
                  <div class="form-group col-xs-12">
                    <label class="label-control"># people <span class="label-warn">*</span></label>
                    <div class="select-reserved">
                      <div class="row row-sm">
                        <div class="form-group col col-xs-6">
                          <select class="js-select-reserved">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                          </select>
                        </div>
                        <div class="form-group col col-xs-6">
                          <input class="select-reserved__check js-reserved-check" id="checkReset" type="checkbox">
                          <label for="checkReset"><i class="fa fa-check"></i><span class="span">I have more than 6 people in my party</span></label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--           end number-of-reversed           /-->
                  <div class="col-xs-12">
                    <div class="form-group">
                      <label class="label-control">Special requests</label>
                      <textarea class="form-control" rows="10" name="message"></textarea>
                    </div>
                  </div>
                  <div class="col-xs-12">
                    <div class="booking-form__submit col-auto">
                      <button class="btn btn--darker" type="submit">make reservation</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <!--           end form           /-->

Coloquei ele completo para que possam ver o Formulario completo

porem preciso apenas fazer da mesma forma no SELECT

                  <!--           ¬ number-of-reversed           /-->
                  <div class="form-group col-xs-12">
                    <label class="label-control"># people <span class="label-warn">*</span></label>
                    <div class="select-reserved">
                      <div class="row row-sm">
                        <div class="form-group col col-xs-6">
                          <select class="js-select-reserved">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                          </select>
                        </div>

Desde já agradeço...

Compartilhar este post


Link para o post
Compartilhar em outros sites

7 respostas a esta questão

Recommended Posts

@Jack Oliveira
Com CSS puro não é possível inserir imagens no elemento option.
Há um plugin jQuery que possibilita obter esse efeito.
Consulte: http://www.marghoobsuleman.com/jquery-image-dropdown

Nota: Seria interessante você postar o link do "site estrangeiro"  para analisarmos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ola @Maujor Boa noite Eu me informalizei errado ao falar que seria o site é um tema estrangeiro. Eu quero criar um site de Hotel e eu vi isso ai achei bem legal e diferente dos outros select

 

@Royal Spa 

Só olha a reservations

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Maujor disse:

@Jack Oliveira
Com CSS puro não é possível inserir imagens no elemento option.
Há um plugin jQuery que possibilita obter esse efeito.
Consulte: http://www.marghoobsuleman.com/jquery-image-dropdown

Nota: Seria interessante você postar o link do "site estrangeiro"  para analisarmos.

Ola boa noite @Maujor Eu me informalizei errado em dizer que seria o site na verdade é um tema estrangeiro, e eu estou criando um site de hotel e achei diferente o select dele..

     Tema Estrangeiro

Compartilhar este post


Link para o post
Compartilhar em outros sites

Veja o uso do plugin jQuery que eu citei em ação:
https://maujor.com/labs/option-com-imagem/
A minha solução usa o select normal
Amanhã vou ver a solução para o que está no site que você indicou, que a seleção é feita por click na imagem.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 07/04/2019 at 21:37, Maujor disse:

Veja o uso do plugin jQuery que eu citei em ação:
https://maujor.com/labs/option-com-imagem/
A minha solução usa o select normal
Amanhã vou ver a solução para o que está no site que você indicou, que a seleção é feita por click na imagem.

 

Boa tarde Maujor 

Eu vi este seu jQuery ai fico bom também..

     

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Maujor disse:

@Jack Oliveira
Veja a solução com JavaScript puro e semelhante à do site estrangeiro:
https://maujor.com/labs/select-com-imagem/

Ola amigo @Maujor boa noite desculpe a demora 

Então este ficou top ou seja ficou parecido mesmo DEUS abençoa a sua ajuda, vai ficar maneiro no site isso

Já olhei muitos sites de Hotel e ainda não vi isto ai ficou bom mesmo...

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Jack Oliveira
      Olá pessoal boa tarde
       
      um pequeno problema que eu estou tendo
       
      preciso fazer que quando selecionar um item no select option ele a carregar aquela opção selecionada
       
      fiz da seguinte  forma mais não tive o resultado que preciso...
       
      <div class="select-country select"> <select class="" id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();"> <option value="">Selecione uma Cidade</option> <?php $QueryCidades = DBRead('cidades','*',"WHERE status = '1' ORDER BY categoria ASC"); if (is_array($QueryCidades)) { foreach ($QueryCidades as $CIDADES) { ?> <option value="<?php echo ConfigPainel('site_url'); ?><?php echo $CIDADES['slug']; ?>/"><?php echo $CIDADES['categoria']; ?> </option> <?php }} ?> </select> </div> se alguém ter uma boa solução fico grato pela ajuda que derem ai
    • Por Paulo Oliveira Albuquerque
      Ola bom dia pessoal..
      Quero fazer do meu select option que ele se torne uma caixa de pesquisa sendo ela automatico
      quando for selecionado o nome fiz assim mais não tive o resultado que eu precisei
      Ex:
      <div class="col-md-12"> <div class="form-group"> <!--<label>Categoria:</label>--> <select class="form-control select2" required> <option>Selecione uma Cidade</option> <?php $Query = DBRead('c_cidade','*','WHERE id > 0 ORDER BY categoria ASC'); if (is_array($Query)) { foreach ($Query as $c_dados) { ?> <option value="https://meudominio.com/<?php echo $c_dados['categoria']; ?>"><?php echo $c_dados['categoria']; ?> <?php echo $c_dados['uf']; ?> <?php echo $c_dados['pais']; ?></option> <?php } } ?> </select> </div> </div> script
       
      <script type="text/javascript"> $(document).ready(function() { $(".select2").select2(); }); </script> Css
      <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> Se puderem me ajudar ai ficaria grato
    • Por josenilson
      olá pessoal,   
       
      tenho um select option que lista uma tabela com nomes dos  clientes,  quando uso esse select em outro form ele lista os nomes completo como:  Josenilson pereira, Vanderlei Divino etc. 
       
      Só que ao retornar isso em uma variável para verificar se esta passando o valor correto como esta na tabela,   só esta retornando o primeiro nome  Josenilson  o pode ser ? 
       
      desde já agraço,  abaixo esta o código de como estou fazendo para listar os dados vindo  da tabela em um select option. 
       
      <select> <option name"motorista"> MOTORISTA <?php $busca = 'SELECT * FROM motorista order by motorista'; $result = $db->query($busca, PDO::FETCH_ASSOC) or die("erro ao conectar"); foreach ($result as $row){ echo '<option value='.$row['motorista'].'>'.$row['motorista'].'</option>'; } ?> </option> </select>  
    • Por josenilson
      Olá galera, por favor estou tentando exibir o resultado desses Select options porem quando eu tento mostrar no ECHO do php
      ele só esta me retornando o ID da tabela, o que esta errado ?

      Código HTML com o select option
      <?php require_once('php/conecta.php'); $busca = 'SELECT * FROM frota_cavalo '; $result = $db->query($busca, PDO::FETCH_ASSOC) or die("erro"); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Estados e cidades</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/meuCodigo.js"></script> </head> <body> <table> <form name="" action="teste.php" method="post"> <select id="categoria" name="frota"> <option value="" name"frota"> Selecione a frota </option> <?php foreach ($result as $row){ echo '<option value='.$row['idFrota_Cavalo'].'>'.$row['N_Frota_Cavalo'].'</option>'; } ?> </select> </div> <select id= "resultado" name="placa" > <option value="estados" name"placa"> Selecione a placa </option> </select> </td> </tr> <button type="submit" name="cadastro" class="btn btn-success">Cadastrar</button> </form> </table> </body> </html> Pagina que recebe o resultado,
      obs: abaixo na parte html eu já tentei retornar todas as variáveis possíveis, porem só recebo como retorno o ID da tabela, e não
      os valores que coloco nos Select.
      <?php //----------------------FUNÇÃO CADASTRO--------------------- if (isset($_POST['cadastro'])) : $frota = filter_input(INPUT_POST,"frota",FILTER_SANITIZE_STRING); $placa = filter_input(INPUT_POST,"placa",FILTER_SANITIZE_STRING); $estados = filter_input(INPUT_POST,"estados",FILTER_SANITIZE_STRING); $categoria = filter_input(INPUT_POST,"categoria",FILTER_SANITIZE_STRING); else : echo "erro ao cadastrar"; endif; //endif; //--------------FIM---DA----FUNÇÃO CADASTRO--------------------- ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="CSS/A4.css"> <title>teste</title> </head> <body> <?php echo "$frota";?><br> <?php echo "$placa";?><br> <?php echo "$estados";?><br> <?php echo "$categoria";?><br> </body> </html>
    • Por josenilson
      Olá pessoal estou usando uma função Ajax com uma lista de arquivos para manipular em um <select option> os ESTADOS E CIDADES no meu formulário.
      a função e esta
      <script type="text/javascript"> $(document).ready(function () { $.getJSON('estados_cidades.json', function (data) { var items = []; var options = '<option value="">escolha um estado</option>'; $.each(data, function (key, val) { options += '<option value="' + val.nome + '">' + val.nome + '</option>'; }); $("#estados").html(options); $("#estados").change(function () { var options_cidades = ''; var str = ""; $("#estados option:selected").each(function () { str += $(this).text(); }); $.each(data, function (key, val) { if(val.nome == str) { $.each(val.cidades, function (key_city, val_city) { options_cidades += '<option value="' + val_city + '">' + val_city + '</option>'; }); } }); $("#cidades").html(options_cidades); }).change(); }); }); </script> e o meu html no caso o select option <!--inicio do seletor-ESTADO--> <select id="estados" style="width:170px;font-size: 13px" name="uf" required class="form-control"> <option value=""></option> </select> <!--fim do seletor-ESTADO--> <!--inicio do seletor-CIDADE--> <select id="cidades" style="width:220px;font-size: 13px" name="cidade" value="<?php echo $cliente['Cidade']; ?>"required class="form-control" > <option value=""></option> </select> <!--fim do seletor-CIDADE--> Esta funcionando tudo bem, eu consigo salvar o que seleciono no option normalmente, porem a minha dificuldade e na hora de editar esse bendito select option, como eu retorno os valores em option ? digo na hora de editar os inputs eu consigo trazer o que já esta cadastrado só que o select option vem vazio, não estou conseguindo retornar os valores no select de ESTADOS e Cidades. como faço isso ? Deixo aqui meu agradecimento e um pequeno pedido, se for possível posta a resolução como chego nesse resultado, pois estou iniciando na programação.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.