Ir para conteúdo

POWERED BY:

Arquivado

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

diegoaugusto

Select com buscador dentro de campos dinamicos

Por , em Javascript

Recommended Posts

diegoaugusto    3

diegoaugusto
Postado

Pessoal peguei um codigo que faz um buscador em um campo select que funciona perfeitamente.

 

Agora preciso colocar ele dinamicamente para adicionar varios campos e ir podendo usar o buscador, o problema que o buscador não funciona.

  

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="./zelect.js"></script>
  <link rel="stylesheet" href="http://css.cdn.tl/normalize.css" />
  <style>
    
    h2, h3, h4 { color: #464646; }
    section { margin-bottom: 40px; }
    section:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

    #intro .zelect {
      display: inline-block;
      background-color: white;
      min-width: 300px;
      cursor: pointer;
      line-height: 36px;
      border: 1px solid #dbdece;
      border-radius: 6px;
      position: relative;
    }
    #intro .zelected {
      font-weight: bold;
      padding-left: 10px;
    }
    #intro .zelected.placeholder {
      color: #999f82;
    }
    #intro .zelected:hover {
      border-color: #c0c4ab;
      box-shadow: inset 0px 5px 8px -6px #dbdece;
    }
    #intro .zelect.open {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    #intro .dropdown {
      background-color: white;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border: 1px solid #dbdece;
      border-top: none;
      position: absolute;
      left:-1px;
      right:-1px;
      top: 36px;
      z-index: 2;
      padding: 3px 5px 3px 3px;
    }
    #intro .dropdown input {
      font-family: sans-serif;
      outline: none;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #dbdece;
      box-sizing: border-box;
      width: 100%;
      padding: 7px 0 7px 10px;
    }
    #intro .dropdown ol {
      padding: 0;
      margin: 3px 0 0 0;
      list-style-type: none;
      max-height: 150px;
      overflow-y: scroll;
    }
    #intro .dropdown li {
      padding-left: 10px;
    }
    #intro .dropdown li.current {
      background-color: #e9ebe1;
    }
    #intro .dropdown .no-results {
      margin-left: 10px;
    }
  </style>
  <script>
    $(setup)

    function setup() {
      $('#intro select').zelect({ placeholder:'Plz select...' })
    }
  </script>
</head>
<body>
<script type="text/javascript">  
$(document).ready(function(){  
 
    var input = '<label style="display: block">Nome: <section id="intro"><select><h2>$("select").zelect()</h2><option>I really have</option><option>to think of some</option></select></section> <a href="#" class="remove">X</a></label>';  
    $("input[name='add']").click(function( e ){  
        $('#inputs_adicionais').append( input );  
    });  
 
    $('#inputs_adicionais').delegate('a','click',function( e ){  
        e.preventDefault();  
        $( this ).parent('label').remove();  
    });  
 
});  
</script>
<label style="display: block"><input type="button" name="add" value="Add" /></label>
  <section id="intro">
    <h2>$('select').zelect()</h2>
    <select>
      <option>I really have</option>
      <option>to think of some</option>
      <option>significantly more</option>
      <option>relevant example data</option>
      <option>here.</option>
      <option>Also, need more and longer items</option>
      <option>to demo scroll</option>
    </select>
  </section>
  <fieldset id="inputs_adicionais" style="border: none">  
        </fieldset> 
</body>
</html>

o select fora do:

  

<script type="text/javascript">  
$(document).ready(function(){  
 
    var input = '<label style="display: block">Nome: <section id="intro"><select><h2>$("select").zelect()</h2><option>I really have</option><option>to think of some</option></select></section> <a href="#" class="remove">X</a></label>';  
    $("input[name='add']").click(function( e ){  
        $('#inputs_adicionais').append( input );  
    });  
 
    $('#inputs_adicionais').delegate('a','click',function( e ){  
        e.preventDefault();  
        $( this ).parent('label').remove();  
    });  
 
});  
</script>

funciona o buscado, agora dentro deste codigo não.

 

O que devo fazer?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Akahs
      Liberar elemento ou div ao selecionar uma opção
      Por Akahs
      Caros Amigos, 
      Estou com uma dúvida que me atormenta tem uma semana e simplesmente travei por não conseguir resolver. 
      Tenho um site onde o cliente vai escolher, através de um formulário de registro, se ele vai necessitar ou não de um traslado até o evento. Caso ele escolha "Não", nada acontece. Caso ele escolha "Sim", eu quero que apareça o outro select com as opções de hotéis de onde ele vai se hospedar para pegar o traslado. Pois bem, eis meu código na parte de formulário:
       
      <div class="col-md-6"> <div class="form-group"> <select class="form-control" name="traslado" id="traslado"> <option value="">Necessita Traslado?*</option> <option value="Sim">Sim</option> <option value="Não">Não</option> </select> </div> </div> <div class="col-md-6" id="teste"> <div class="form-group" style="display:none;"> <select class="form-control" name="hotel" id="hotel"> <option value="0">Se Sim, escolha o Hotel de Origem*</option> <option value="SleepIn Jacarei">SleepIn Jacareí</option> <option value="Ibis Jacarei">Íbis Jacareí</option> <option value="Ibis SJC">Ibis SJC</option> <option value="Novotel SJC">Novotel SJC</option> </select> </div> </div>  
      Percebam que, ao responder "Sim" para a opção de "Traslado" eu quero que as opções de "Hoteis" apareçam juntamente com o outro grupo de select "form-control". 
      Pensei em duas formas de trabalhar:
      A primeira seria manipulando a div do "form-control" relativo aos hoteis, ela fica oculta e ao clicar em Sim em "Traslado" ela aparece. (Tentei fazer, sem sucesso.)
      A outra seria manipular o style "display:none", enfim, uma idéia que me ocorreu. 
       
      Fiz uns códigos em JavaScript porém nenhum funcionou, o que cheguei mais perto foi sumir o formulário todo.
      Se alguém puder dar alguma dica e/ou solução ficarei enormemente agradecido. 
      Att,

    • bessa238
      setar SELECT de estado e cidade dependentes
      Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
    • clickanapolis
      Pegar latitude e longitude
      Por clickanapolis
      Bom dia pessoal, estou criando uma função dentro do meu sistema para mostrar o mapa do cliente.
       
      o que tenho é apenas o endereço, cep essas coisas e pelo que vi na documentação do google maps precisa da latitude e longitude.
       
      Pesquisando pela internet não consegui fazer nenhuma função me trazer a longitude e latitude a partir do cep ou do endereço.
       
      Alguem tem algo que possa me ajudar nessa empreita?
×

Informação importante

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

  Aceito