Ir para conteúdo
  • 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

  • 0

@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
  • 0

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

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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

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