Add and remove select with button

Question

Add and remove select with button

Navigation

#1 by (1 votes)

1

I'm developing a form in which I have a select that chooses states and capitals from Brazil, but since whoever fill can add more than one select I need to make a add another select button, as I'll save the selected values, is that in case I am pulling this data from a json. Below is my code

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

javascript jquery ajax json

asked by anonymous 03.05.2018 / 19:43

1 answer

Concatenate string in the middle of another using array loop Get value passed by aria-controls (Bootstrap tab panel)

score 1 · Answer 1

You can clone the element and add it to div . To do this, use the .clone() method. But change id so it does not get duplicated.

It is also important to change the name to name="cidades[]" to be able to get as an array in the backend.

Then create a click event to clone and insert the new select this way:

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

});

Example:

$("#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><divclass="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>