無法添加和刪除動態生成的下拉

我要生成這種格式動態下拉：無法添加和刪除動態生成的下拉

<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>

Remove按鈕也不能刪除整個row.when我的刪除按鈕，然後單擊只整行（含2下拉）應該被刪除。

來源

2015-10-09 Learning-Overthinker-Confused

目前的行爲是什麼？您實際上可以從瀏覽器進行調試。 – artsylar

@學習，你想添加和刪除行。對？ –

您希望所有下拉列表都出現在id爲「FieldContainer」的div中？ –

你可能想這樣做，是這樣的：

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 
......

所以每次添加的下拉列表中的一排時，it'be嵌套在

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

來源

2015-10-09 05:28:33

而不是：$（「body」）。append（newRow）;是否有可能使用insertbefore jquery函數添加按鈕之前添加按鈕？ –

看到這裏http://jsfiddle.net/4gsnewbv/1/ –

抱歉打擾你，但在實際的我的按鈕是這樣的：

的+ Add

。然後？ –

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>

來源

2015-10-09 05:32:45 Omidam81

請參閱我的問題中的圖片 –

是的，我看到它，已更新。 – Omidam81

仍然你的輸出不是我的預期格式 –

如果你想添加一行有兩個下拉菜單和刪除按鈕每次用戶點擊「添加」時，您都可以嘗試以下操作。（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>

來源

2015-10-09 05:45:28 artsylar

你的小提琴不起作用 –

對不起，我忘了點擊更新。你可以再試一次嗎？ – artsylar

您可以使用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>

你可以看到，我剛纔提到了在模板中刪除按鈕類名。所以，我們可以處理每個刪除按鈕的點擊事件並刪除它的html元素。

$(document).ready(function() { 
    // click event for all remove button 
    $('body').on('click', '.removeBtn', function() { 
     $(this).closest('.select-row').remove(); 
    }); 
});

你可以看到，使用html模板時添加和刪除有多簡單。那你爲什麼要以其他方式去。

希望這會幫助你。如果您有任何疑問，請發表評論。

來源

2015-10-09 05:46:22

無法添加和刪除動態生成的下拉

回答

相關問題