Ir para conteúdo

Arquivado

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

diegoaugusto

Select com buscador dentro de campos dinamicos

Recommended Posts

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

  • Conteúdo Similar

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

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