Javascript 使用jQuery动态“添加另一个产品”表单
我试图创建一个具有输入和选择的动态表单。select值现在将来自JSON数据，我只是使用一个数组，它必须具有添加另一个产品的功能 一个页面必须有两个具有相同功能的表单 当单击“添加另一个产品”时，我克隆了一行，该行本应在父窗体上克隆，但这并没有发生，也不知道为什么 我留下了一个与下面相同的代码 HTML代码Javascript 使用jQuery动态“添加另一个产品”表单,javascript,jquery,html,Javascript,Jquery,Html,我试图创建一个具有输入和选择的动态表单。select值现在将来自JSON数据，我只是使用一个数组，它必须具有添加另一个产品的功能 一个页面必须有两个具有相同功能的表单 当单击“添加另一个产品”时，我克隆了一行，该行本应在父窗体上克隆，但这并没有发生，也不知道为什么 我留下了一个与下面相同的代码 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
<!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>
$(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());
}
}
快速回答是您没有实例化对象，因此代码中的最后一项将继承所有属性-这就是为什么只有第二个表单被正确激活，并为每个绑定继承正确的this 您需要做的是：
var test = Object.create(dynamicSelect);
var test2 = Object.create(dynamicSelect);
test.init(arr,'#myForm');
test2.init(arr,'#myForm2');
class Dog {
bark(){
}
}
const fido = new dog();
fido.bark();