我想以这种格式生成动态下拉列表:
<div class="row"> //first row containing 2 dynamic Dropdown
<div class="col-md-3 col-xs-12 col-sm-12 form-group">
<select id="field1">
</div>
<div class="col-md-3 col-xs-12 col-sm-12 form-group">
<select id="field1">
</div>
</div>
<div class="row"> //second row containing 2 dynamic Dropdown
<div class="col-md-3 col-xs-12 col-sm-12 form-group">
<select id="field2">
</div>
<div class="col-md-3 col-xs-12 col-sm-12 form-group">
<select id="field2">
</div>
</div>
等......
输出格式:
注意:我想在每行末尾删除按钮
var cnt = 1;
function AddRow() {
var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "' name='drpdownCourseNm" + cnt + "' />");
var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "' name='drpdownSubCourseNm" + cnt + "' />");
var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "' name='drpdownSubjectNm" + cnt + "' />");
var removeButton = $("<img class='remove' src='../remove.png' />");
fieldWrapper1.append(fName1);
fieldWrapper2.append(fName2);
fieldWrapper3.append(fName3);
fieldWrapper4.append(removeButton);
$("#FieldContainer").append(fieldWrapper1);
$("#FieldContainer").append(fieldWrapper2);
$("#FieldContainer").append(fieldWrapper3);
$("#FieldContainer").append(fieldWrapper4);
cnt = cnt + 1;
}
$(document).on('click', "img.remove", function () {
$(this).parent().fadeOut(1000, function () {
var id = $(this).attr("id").substr(5);
$(this).remove();
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row" id="FieldContainer">
</div>
<a onclick="AddRow()" href="#">+ Add </a>
&#13;
删除按钮也没有删除整行。当我点击删除按钮时,只应移除整行(包含2个下拉列表)。
答案 0 :(得分:2)
你可能想这样做:
你的JS:
.......
fieldWrapper1.append(fName1);
fieldWrapper2.append(fName2);
fieldWrapper3.append(fName3);
fieldWrapper4.append(removeButton);
var newRow = $('<div class="row" id=""></div>');
$(newRow).append(fieldWrapper1);
$(newRow).append(fieldWrapper2);
$(newRow).append(fieldWrapper3);
$(newRow).append(fieldWrapper4);
$("body").append(newRow); // I am assuming it will be a direct child of body. If not, use the appropriate ID or Class
......
因此,每次添加一行下拉列表时,它都会嵌套在
中<div class="row" id="">
...Your dropdowns and image goes here...
</div>
所以它看起来与
类似<body>
<div class="row" id="">
...Your dropdowns and image goes here...
</div>
<div class="row" id="">
...Your dropdowns and image goes here...
</div>
and so on...
</body>
然后使用jQuery closest
选择器查找具有类row
的父级并删除该特定行。
$(document).on('click', "img.remove", function () {
$(this).closest(".row").fadeOut(1000, function () { //targets the entire row of dropdowns
var id = $(this).attr("id").substr(5);
$(this).remove();
});
});
修改:如果您想在添加按钮之前添加新行:
....
$(newRow).insertBefore($(".add-more").parent());
....
答案 1 :(得分:1)
var cnt = 1;
function AddRow() {
var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "' name='drpdownCourseNm" + cnt + "' />");
var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "' name='drpdownSubCourseNm" + cnt + "' />");
var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "' name='drpdownSubjectNm" + cnt + "' />");
var removeButton = $("<img class='remove' src='http://icons.iconseeker.com/png/fullsize/web-development-3/action-delete-sharp-thick.png' />");
fieldWrapper1.append(fName1);
fieldWrapper1.append(fName2);
fieldWrapper1.append(fName3);
fieldWrapper1.append(removeButton.clone());
$("#FieldContainer").append(fieldWrapper1);
$("#FieldContainer").append(fieldWrapper2);
$("#FieldContainer").append(fieldWrapper3);
$("#FieldContainer").append(fieldWrapper4);
cnt = cnt + 1;
}
$(document).on('click', "img.remove", function () {
$(this).parent().fadeOut(1000, function () {
var id = $(this).attr("id").substr(5);
$(this).remove();
});
});
AddRow();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row" id="FieldContainer">
</div>
<a onclick="AddRow()" href="#">+ Add </a>
&#13;
答案 2 :(得分:1)
如果您想添加一个包含两个下拉列表的行,并在每次用户点击&#34;添加&#34;时删除按钮,您可以尝试以下操作。 (https://jsfiddle.net/0npzqr1a/4/)
var cnt = 1;
function AddRow() {
var rowWrapper = $('<div class="row" id="FieldContainer"></div>');
var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>");
var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>");
var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "' name='drpdownCourseNm" + cnt + "' />");
var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "' name='drpdownSubCourseNm" + cnt + "' />");
var removeButton = $("<img class='remove' src='../remove.png' />");
fieldWrapper1.append(fName1);
fieldWrapper2.append(fName2);
rowWrapper.append(fieldWrapper1);
rowWrapper.append(fieldWrapper2);
rowWrapper.append(removeButton);
$("#FieldContainer").append(rowWrapper);
cnt = cnt + 1;
}
$(document).on('click', "img.remove", function () {
$(this).closest('.row').fadeOut(1000, function () {
var id = $(this).attr("id").substr(5);
$(this).remove();
});
});
$(document).on('click', "a#add", function () {
AddRow();
});
和html,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row" id="FieldContainer">
</div>
<a id="add" href="#">+ Add </a>
答案 3 :(得分:1)
您可以使用html模板添加和删除元素。
为此,您需要根据需要创建一个html模板。
<script type="text/template" id="rowtemplate">
<div class="select-row row">
<div class="col-md-3 col-xs-12 col-sm-12 form-group">
<select id="field1"></select>
</div>
<div class="col-md-3 col-xs-12 col-sm-12 form-group">
<select id="field1"></select>
</div>
<div>
<a class="removeBtn">Remove</a>
</div>
</div>
</script>
现在您只需添加或删除每一行。
您的添加功能将如下所示
<script>
function AddRow() {
$('#FieldContainer').append($('#rowtemplate').html());
}
</script>
您可以看到我在模板中提到了删除按钮的类名。因此,我们可以只处理每个删除按钮的click事件并删除它的html元素。
$(document).ready(function () {
// click event for all remove button
$('body').on('click', '.removeBtn', function () {
$(this).closest('.select-row').remove();
});
});
您可以看到使用html模板时添加和删除的简单程度。那么你为什么要采取其他任何方式。
希望这会对你有所帮助。如果您有任何疑问,请发表评论。