堆栈内存溢出
  繁体   English   中英

无法添加和删除动态生成的下拉列表

[英]Unable to add and remove dynamically generated dropdown

 原文  2015-10-09 05:12:00  3   4    javascript/ jquery/ html/ dropdown

问题描述

我想以这种格式生成动态Dropdown： 

 <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(); }); }); 
 <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个下拉列表）。

4 个解决方案

解决方案1
 2 已采纳  2015-10-09 05:28:33

您可能想要这样做：

http://jsfiddle.net/4gsnewbv/

您的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()); 
....

解决方案2
 1  2015-10-09 05:32:45

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

解决方案3
 1  2015-10-09 05:45:28

如果要在用户每次单击“添加”时添加带有两个下拉菜单的行并删除按钮，则可以尝试以下操作。 （ 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>

解决方案4
 1  2015-10-09 05:46:22

您可以使用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模板时添加和删除有多么简单。 那为什么还要用其他方式呢？

希望这会帮助你。 如果您有任何疑问，请发表评论。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从动态生成的下拉列表中删除时间 在下拉列表中动态添加和删除项目 JavaScript以动态生成的形式添加删除字段 动态添加和删除级联下拉列表行？ 无法通过Jquery动态添加下拉菜单 向动态生成的按钮添加和删除活动类事件侦听器 删除动态生成的文本框 Select2下拉列表动态添加，删除和刷新项目 寻找动态添加/删除框，但在下拉值上隐藏字段 动态生成的下拉列表的设置值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM