1

Estou desenvolvendo um formulario em que tenho um select que escolhe estados e capitais do brasil, mas como quem preencher pode adicionar mais de um select eu preciso fazer um botão adicionar outro select,pois vou salvar os valores selecionados, é que no caso estou puxando esses dados de um json. Segue abaixo meu código

    <div class="tab">Escreva nos espaços abaixo todas as cidades que compõe o seu Distrito:
                <select id="estados" oninput="this.className = ''" name="estados" class="estados">
                    <option value=""></option>
                </select>
                <select id="cidades" oninput="this.className = ''" name="cidades" class="cidades">
                </select>
                <div class="adicionar"></div>
                <p><button id="addCidade">Adicionar Cidade</button></p>
            </div>


    $(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();                
    }); 
});

1 Resposta 1

1

Você pode clonar o elemento e adicionar na div. Para isso use o método .clone(). Mas altere o id para que não fique repetido.

É importante também alterar o name para name="cidades[]" para poder pegar como array no backend.

Então crie um evento click para clonar e inserir o novo select desta forma:

$("#addCidade").on("click", function(){

   var conta = $(".cidades").length; // conta quantos existem para gerar um novo id
   var clone = $("#cidades").clone().attr("id", "cidades"+conta);
   clone.appendTo(".adicionar");

});

Exemplo:

$("#addCidade").on("click", function(){
   
   var conta = $(".cidades").length;
   var clone = $("#cidades").clone().attr("id", "cidades"+conta);
   clone.appendTo(".adicionar");
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">Escreva nos espaços abaixo todas as cidades que compõe o seu Distrito:
   <select id="estados" oninput="this.className = ''" name="estados" class="estados">
      <option value=""></option>
   </select>
   <select id="cidades" oninput="this.className = ''" name="cidades[]" class="cidades">
      <option value="1">BSB</option>
   </select>
   <div class="adicionar"></div>
   <p><button id="addCidade">Adicionar Cidade</button></p>
</div>

2
  • Mas eu quero pegar os valores do meu json, e com isso só clonei o campo mas sem os valores
    – Thi100
    4/05/2018 às 14:46
  • Então, o ideal era adicionar o novo select somente após o primeiro ter sido carregado, senão não faz mt sentido
    – Sam
    4/05/2018 às 17:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .