Question

我无法添加多个选择表单。

因为使用jquery selectForm实现了materializecss，并且如果我追加了新的select表单，则它不会显示。

https：// codepen.io/anon/pen/omBjNq

Answer 1

尝试一下：

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

只需从您的html字符串中删除tr和td，您便会在追加新的选择后忘记调用formSelect（）

Answer 2

如果您想通过此修改来维护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”实例。

materializecss追加多个选择形式

2 个答案: