Ir para conteúdo

Arquivado

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

FabianoBSB

Lista Dinâmica

Recommended Posts

Olá pessoa alguém pode me dá uma dica de como eu crio uma lista dinâmica de cidades.

Mas não quero aquela que ao clicar na combo estado a combo de baixo lista a cidade referente ao estado selecionado. Essa já tenho.

Quero uma dica de criar uma que quando o usuário clica na combo estado a combo de baixo lista as cidades referente ao estado e quando ele clica na cidade escolhida, abaixo dessa combo tem uma listbox preenchendo dinamicamente a cada click que ele der na combo com as cidades. Ou seja a listbox terá uma lista de cidades de vários estados. Cada vez que ele trocar a combo estados, trocará também a cidade e ele escolherá e assim preencherá a listbox sem apagar as que já estão la. Se alguem tiver uma dica eu agradeço. Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como você falou, vai precisar de 2 combos(estados e cidades dos estados selecionados ) e uma list.

 

Do lado da combo de cidades você vai precisar colocar um botão de adição, quando o usuário clicar neste botão aí que você adiciona a cidade no list. No list tb seria interessante ter alguma forma de poder remover uma cidade que foi adicionada

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom separando por partes a primeira coisa que você precisa é uma lista completa de Estados / Cidades....

 

Aqui tem uma listagem completa:

https://gist.githubusercontent.com/letanure/3012978/raw/36fc21d9e2fc45c078e0e0e07cce3c81965db8f9/estados-cidades.json

 

Eu fiz dois exemplos (JsVanilla e jQuery):

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/select

 

 

Oq ainda n entendi é se você quer agregar cidades em outro lugar...

 

Ex:

 

Estado de São Paulo:

E o usuário seleciona e 'agrega':

Guarujá, Guarulhos, Osasco etc...

 

Caso seja 'multiple select' tem esse cara (como a descrição acima):

https://select2.github.io/examples.html#multiple

 


Agora se a necessidade é escolher 2x o mesmo lugar ai já muda um pouco... (ex: 

Osasco (3x)

Guarulhos 

Guarujá (2x)

 

 

Enfim bons estudos.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, pelo que eu entendí, ele quer selecionar umas cidades do estado A, depois mudar o estado e selecionar outras cidades do estado B, depois mudar o estado e selecionar mais cidades do estado C, não é tudo do mesmo estado

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

@Pita 

Nesse caso é um cenário de agregação...

 

8 minutos atrás, gabrieldarezzo disse:

Estado de São Paulo:

E o usuário seleciona e 'agrega':

Guarujá, Guarulhos, Osasco etc...

 

Caso seja 'multiple select' tem esse cara (como a descrição acima):

https://select2.github.io/examples.html#multiple

 

 

 

Da pra fazer sem problemas.

 

Você pode abstrair todas as cidades com um ID sequencial 

Ex:

1 - Guarujá
2 - Guarulhos
3 - Osasco

E simplesmente ter um box para adicionar eles...


Exemplo adicionar um botão ao lado 'Adicionar Cidade' nesse cara aqui:

http://gabrieldarezzo.github.io/desafiosInternos/select/jquery.html


Sempre que clicar adicionar aumentar essa lista com o ID da cidade selecionada 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

O problema é que se ele alterar o estado, ele irá refazer todo o combo de cidades e irá perder as cidades do outro estado que estavam selecionadas

Compartilhar este post


Link para o post
Compartilhar em outros sites
22 horas atrás, Pita disse:

Então, pelo que eu entendí, ele quer selecionar umas cidades do estado A, depois mudar o estado e selecionar outras cidades do estado B, depois mudar o estado e selecionar mais cidades do estado C, não é tudo do mesmo estado

Exato!! Ja faço todos esses que o Gabriel falou.

O que quero é o seguinte:

Combo1 - Estados - Single Select

Combo2 - Cidades - Multiselect

listbox - A lista das cidades que escolhi na combo2.

Fiz com Select2 mas quando mudo as combos 1 e 2 a listbox limpa.

 

Valew  

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Olá. Tenho 3 formulários em uma mesma pagina, onde cada um tem 1 input type text.
      O que preciso é recuperar o nome desses inputs e o valor correspondente ao formulário submetido.
      =============
      form name="formulario1" id="formulario1"
      input type="text" name="nome1" value="valor1" /form
      form name="formulario2" id="formulario2"
      input type="text" name="nome2" value="valor2" /form
      form name="formulario3" id="formulario3"
      input type="text" name="nome3" value="valor3" /form
      =============
      ..........
      var formulario_submetido = document.getElementById("formulario1"); formulario_submetido.addEventListener('submit', function(e) { e.preventDefault(); //tentei console.log(document.querySelectorAll('#'+this.id + ' input').name); //tentei var formula = new FormData(formulario_submetido); console.log(formula.input['type=text'].name); //tentei console.log(formula.get(input['type=text']).name); ..........
        no console.log(e), ele está nessa hierarquia   form -> srcElement -> input -> attributes -> name 
      Como recupero o valor do name dele e o valor do value?
       
      Agradeço desde já.
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
×

Informação importante

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