Question

我正在尝试创建一个具有输入和选择的动态表单。选择值将来自JSON数据（现在，我只是使用数组），它必须具有“添加另一个产品”的功能。

一个页面必须有两种形式，具有相同的功能

当点击“添加另一个产品”时，我克隆了一行，它应该克隆在父表单上，但这不会发生，也无法解决原因。

我使用与下面相同的代码留下Codepen link

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Select</title>
</head>
<body>
<form id="myForm" action="" class="dynamic-select">
    <div class="main-clone">
        <select name="myName">
                <option value="">Hi</option>
        </select>
        <input name="myText" type="text">
    </div>
    <p class="clone-btn">Add another product</p>
    <p class="re">Re</p>
</form>

<form id="myForm2" action="" class="dynamic-select">
    <div class="main-clone">
        <select name="myName">
                <option value="">Hi</option>
        </select>
        <input name="myText" type="text">
    </div>
    <p class="clone-btn">Add another product</p>
    <p class="re">Re</p>
</form>
</body>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/script.js"></script>
</html>

jQuery FORM

$(document).ready(function(){
    var arr = ['Juanma', 'Pepe', 'Esteban', 'Pedro', 'Juan'];
    var arr2 = ['a', 'b', 'c', 'd', 'e'];
    dynamicSelect.init(arr,'#myForm');
    dynamicSelect.init(arr,'#myForm2');

    $('form').on('click','.delete-clone', function(){
        $(this).parent().remove();
    });

});

var dynamicSelect = {
    init: function(arr,id){
        this.cachedDom(id);
        this.bindEvents();
        this.createElement(arr);
    },
    cachedDom : function(id){
        this.$form = $(id);
        this.$select = this.$form.find('select');
        this.$mainClone = this.$form.find(".main-clone");
        this.$cloneBtn = this.$form.find('.clone-btn');
        this.$submit = this.$form.find('.re');
    },
    bindEvents : function(){
        this.$cloneBtn.on('click', this.cloneElement.bind(this));
        this.$submit.on('click', this.getValues.bind(this));
    },
    createElement: function(arr){
        var fragment = document.createDocumentFragment();
        arr.forEach(function(arr, index) {
            var opt = document.createElement('option');
            opt.innerHTML = arr;
            opt.value = arr;
            fragment.appendChild(opt);
        });
        this.$select.append(fragment);
    },
    cloneElement: function(){
        var $clone = this.$mainClone.clone();
        $clone.append('<span class="delete-clone">X</span>');
        $clone.insertAfter(this.$mainClone);
    },
    getValues: function(){
        console.log(this.$form.serialize());
    }
}

Answer 1

快速回答是你没有实例化对象，所以代码中的最后一项将是继承所有属性的项 - 这就是为什么只有第二种形式被正确激活才能继承正确的＆＃34;这和＆＃34;对于每个绑定。

您需要做的是：

var test = Object.create(dynamicSelect);
var test2 = Object.create(dynamicSelect);
test.init(arr,'#myForm');
test2.init(arr,'#myForm2');

https://codepen.io/anon/pen/EmZBGY?editors=1010

这实质上使每个对象都有自己的＆＃34;这个＆＃34;当对象被实例化时。在其他语言或具有实际课程的es6中，您会看到类似Dog {}的内容。然后你会：

class Dog {
 bark(){
 }
}    
const fido = new dog();
fido.bark();

这与object.create大致相同。

使用jQuery动态“添加另一个产品”表单

1 个答案: