我想以这种格式生成动态下拉列表:
<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>
ETC......
输出格式:
注意:我想在每行末尾删除按钮
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();
});
});
<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>
删除按钮也不会删除整行。当我单击删除按钮时,应该只删除整行(包含 2 个下拉菜单)。