materializecss добавить несколько форм выбора - PullRequest
Новая
       5

materializecss добавить несколько форм выбора

0 голосов
/ 31 января 2019

У меня проблема с добавлением нескольких форм выбора ..

Поскольку materializecss использует jquery selectForm и если я добавляю новую форму выбора, она не отображается.

https: // codepen.И.О. / Анон / ручка / omBjNq

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Если вы хотите сохранить структуру html с помощью этой модификации, она будет работать для вас. 

$(document).ready(function(){
        var i = 1;
        $('#add').click(function(){
            i++;
            $('#product_field').append('<tr id="row'+i+'"><td><div class="row"><div class="input-field col s2"><select><option>Select 1</option><option>Select 2</option><option>Select 3</option><option>Select 4</option></select></div><div class="input-field col s1 right"><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">-</button></div></div></td></tr>');
             $("#row"+i+" select").formSelect();
        });

        $(document).on('click','.btn_remove', function(){
            var button_id = $(this).attr("id");
             $("#row"+button_id+"").remove();
        });


        $('select').formSelect();
    });

Единственное изменение заключалось в том, что, когда я создал новый ´tr´, в этот момент создайтеновый экземпляр «formSelect ».

0 голосов
/ 31 января 2019

Попробуйте это: 

    $(document).ready(function(){
            var i = 1;
            $('#add').click(function(){
                i++;
                $('#product_field').append('<div class="row"><div class="input-field col s2"><select><option>Select 1</option><option>Select 2</option><option>Select 3</option><option>Select 4</option></select></div><div class="input-field col s1 right"><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">-</button></div></div>');
                 $('select').trigger('contentChanged').formSelect();
            });

            $(document).on('click','.btn_remove', function(){
                var button_id = $(this).attr("id");
                $("#row"+button_id+"").remove();
            });


            $('select').formSelect();
              $('select').on('contentChanged', function() {
              $(this).formSelect();
        });
});

Просто удалите tr и td из html-строки, и вы забыли вызвать formSelect () после добавления нового выбора

...