Clone a dynamic dropdown

JavaScript
1

Hi,

I’ve got a dropdown box which is populated with ajax according to what option i choose from another dropdown. I need to duplicate the dropdown box keeping the same options loaded via ajax, this is what i’ve done o far. Many thanks for your help

This is the code to get tha value from the first dropbox and then use it for ajax

  $('#flatGroup').on('change',function(){
        var countryID = $(this).val();
        console.log(countryID);
        if(countryID){
            $.ajax({
                type:'POST',
                url:'../controllers/ctrl_admin_group_table_app/ctrl_admin_get_building_table.php',
                data: {

                  group_id: countryID

                },

                success:function(html){
                    $('#flatTable-1').html(html);
                    $(".bs-select").selectpicker('refresh');

                }
            }); 
        }

    });

This is the code i’m using to close the second dropbox that receive the option from ajax

 // start repeating form tabelle
        //Start repeating form group add limit
        var maxGroup1 = 5;
        //add more fields group
        var fieldGroup1= $(".fieldGroup1").clone();

        $(".addMore1").click(function() {

          var fgc1 = $('body').find('.fieldGroup1').length;

          if (fgc1 < maxGroup1) {

            var fieldHTML1 = '<div class="form-group fieldGroup1">' + fieldGroup1.html() + '<div class="col-md-1"><label class="control-label">&nbsp;</label><a href="#" data-repeater-delete class="btn btn-danger remove"><i class="fa fa-close"></i></a></div></div>';

            fieldHTML1 = fieldHTML1.replace('flatTable-1', 'flatTable-' + (fgc1 + 1));
            fieldHTML1 = fieldHTML1.replace('flatMillesimi-1', 'flatMillesimi-' + (fgc1 + 1));

            $('body').find('.fieldGroup1:last').after(fieldHTML1);

            $('.bs-select').selectpicker({

              iconBase: 'fa',
              tickIcon: 'fa-check'
            });

          } else {

            swal("Operazione Annullata", "Hai raggiunto il massimo numero di proprietari registrabili", "error");

          }
        });

        //remove fields group
        $("body").on("click", ".remove", function() {
          $(this).parents(".fieldGroup1").remove();
        });
        // end repeating form

This is the HTML code

  <div class="row">
                 
        <div class="col-md-9">

                <div class="portlet-body form">

                            <div class="col-md-9">
                                <div class="mt-repeater">
                                    <div data-repeater-list="group-b">
                                        <div data-repeater-item class="row">

                                          <div class="form-group fieldGroup1">

                                            <div class="col-md-4">

                                              <div class="form-group">
                                                <label class="control-label">Tabella</label>

                                                <select class="form-control bs-select" id="flatTable-1" name="flatTable[]" title="Seleziona tabella millesimale"></select>

                                              </div>

                                            </div>

                                            <div class="col-md-4">

                                              <div class="form-group">
                                                <label class="control-label">
                                                  <i class="fa fa-info-circle red tooltips" data-placement="top" data-original-title="Quota del titolare dell'immobile" ></i>Millessimi<span class="required"> * </span>
                                                </label>
                                                   <input type="text" id="flatMillesimi-1" name="flatMillesimi[]" class="form-control" placeholder="Millessimi dell'immobile" >
                                                </div>

                                            </div>

                                          </div> <!--  Fine field group -->

                                        </div>
                                    </div>

                                 <!--    <hr> -->
                                      <a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add addMore1">
                                          <i class="fa fa-plus"></i> Aggiungi tabella</a>
                                      <br>
                                      <br>

                                  </div>
                            </div>
                </div>

        </div>
    </div>
2

…

success:function(html){
                    $('#flatTable-1').html(html);
                   $('#flatTable-2').html(html);
                   $(".bs-select").selectpicker('refresh');

                }

?

or

success:function(html){
                    $('.allmydropdownshavethisclass').html(html);
                   $(".bs-select").selectpicker('refresh');

                }
3

Hi @m_hutley thanks for you help I’ve already tested it but it doesn’t work, still only shows the options in the first dropdown box but not in the second

4

So… My first instinct is… “let’s fix your duplication code.” Cause… frankly that’s a mess to read.
My second instinct is… “So… why do you have the ID at all?”

       $(".addMore1").click(function() {

          var fgc1 = $('body').find('.fieldGroup1').length;

          if (fgc1 < maxGroup1) {
            var fieldGroup1= $(".fieldGroup1:first").clone();
             $('body').find('.fieldGroup1:last').after(fieldGroup1);
         }
      });

EDIT: I swear one day Disqus will actually let me finish a post before hitting enter.

5

Hi @m_hutley I’ve tested with the fix for duplication code but still doesn’t load the options in the duplicated dropdown, also obviosly the option to delete the duplicated line is not there anymore. Yes maybe I don’t need the ID but then how can I add the options to the dropdown when I get success from ajax?

6

OK so, I’ve tested it without selectpicker and it seems to work it seems like $(“.bs-select”).selectpicker(‘refresh’); only works for the first dropbox but not for all of them, do you know how I can fix this? many thanks

7

I’ve added the ID to do validation checks with jquery validator plugin

8

It may be that the selectpicker refresh command isn’t smart enough to do a refresh OR a setup if the item isnt already a selectpicker.

Try adding this back into the cloning function:

$(".bs-select:last").selectpicker({iconBase: 'fa',tickIcon: 'fa-check'});
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.