Sử dụng jQuery để tự động thêm các trường biểu mẫu (hoặc các trường) dựa trên giá trị hộp thả xuống

Question

Như tiêu đề cho biết, điều tôi đang cố làm là để jQuery thêm một số trường bổ sung dựa trên giá trị được chọn trong danh sách thả xuống xuống hộp. Ví dụ: khi trang tải, trình đơn thả xuống có giá trị mặc định là 1 và trường mặc định được hiển thị. Bây giờ, nếu người dùng chọn một giá trị khác trong trình đơn thả xuống đó, số lượng các trường cần được điều chỉnh cho phù hợp, thông qua nhân bản (tôi cho rằng đây sẽ là giải pháp tốt nhất). Dưới đây là những gì tôi có cho đến nay:

thả xuống mã hộp ...

<select id="itemCount" name="itemCount"> 
<option value="1">1 item</option> 
<option value="2">2 items</option> 
<option value="3">3 items</option> 
<option value="4">4 items</option> 
<option value="5">5 items</option> 
<option value="6">6 items</option> 
</select> 

... jQuery thay đổi người nghe ...

$(document).ready(function() { 
$("#itemCount").change(function(){ 
    var itemCountVal = jQuery(this).val(); 
    $("#item_dup_1").fieldsManage(itemCountVal); 
}); 
}); 

... và chức năng riêng của mình (nó thực sự dựa trên một plugin jQuery mà tôi nghĩ là một điểm khởi đầu tốt cho những gì tôi cần):

jQuery.fn.fieldsManage = function (number) { 
    var clone, 
    objTemplate = source.clone(true), 
    source = jQuery(this), 
    maxClones = number - 1, 
    clones = []; 

    if (clones.length < maxClones) { 
    while (clones.length < maxClones) { 
     clone = objTemplate.clone(true).insertAfter(clones[clones.length - 1] || source); 
     clones.push(clone); 
    } 
    } 

    if (clones.length > maxClones) { 
    // Fieldsets removal function goes here. 
    } 
} 

Đối tượng đang được c được gọi là <fieldset id="item_dup_1"><input><input><input></fieldset>. Tôi không nghĩ rằng nó là cần thiết để hiển thị mã đầy đủ cho nó là tốt.

Điều này hoạt động như một sự quyến rũ cho thay đổi đầu tiên, nhưng nếu người dùng thay đổi lại giá trị, đó là khi mọi thứ xảy ra sai và thay vì hiển thị số lượng trường chính xác, nó sẽ hiển thị nhiều hơn. Có vẻ như nó đang tính toán số lượng các trường cần thiết bắt đầu từ đầu, bỏ qua thực tế là các fieldets đã được thêm vào, và đây thực sự là vấn đề của tôi. Tôi cũng có một chức năng (không được hiển thị ở đây chỉ để giữ cho câu hỏi rõ ràng và càng ngắn càng tốt) mà asigns ID mới cho fieldset nhân bản để ngăn chặn ID trùng lặp và hoạt động mà không có một xô.

Tôi tin rằng tôi đang làm điều gì đó sai, nhưng tôi đã đập đầu vào tường với hai ngày nay, cố gắng tìm thấy nó là gì không có may mắn như vậy, bất kỳ trợ giúp sẽ được đánh giá cao hơn !

Cảm ơn trước!

Answer 1

tôi không thích các giải pháp của Nate B.

• nó cần một yếu tố chứa thêm
• tái tạo tất cả mọi thứ, do đó mất dữ liệu đã nhập
• tạo ra một vấn đề bảo trì: html markup của fieldset được nhân đôi (một lần trong HTML, một khi là chuỗi để chắp thêm)
• tạo id không hợp lệ cho các trường (id không thể bắt đầu bằng số)

Điều này làm những gì bạn muốn và tương tự như những gì bạn đã làm. Chỉ giữ các id trong một thuộc tính dữ liệu trên phần tử gốc (thay vì giữ toàn bộ đối tượng nhân bản có thể sử dụng một lượng lớn bộ nhớ). Giữ tất cả các giá trị đã được nhập. Không tạo lại mọi thứ nếu bạn thay đổi từ ví dụ: 3 đến 5. Thay vào đó chỉ tạo ra hai trường mới. Loại bỏ chúng theo thứ tự ngược lại khi chúng được tạo ra.

jQuery.fn.fieldsManage = function (number) { 
    var ele = $(this); 
    var clones = ele.data("clones"); 
    clones = clones ? clones : new Array(ele.attr("id")); 
    if (clones.length < number) { 
     var clone; 
     while(clones.length < number) { 
      clone = ele.clone(true); 
      var id = clones[0]+clones.length; 
      clone.attr("id", id); 
      $("#"+clones[clones.length-1]).after(clone); 
      clones.push(id); 
     } 
    } else { 
     while(clones.length > number) { 
      $("#"+clones.pop()).remove(); 
     } 
    } 
    ele.data("clones", clones); 
} 

$(document).ready(function() { 
    $("#itemCount").change(function() { 
     $("#item_dup_1").fieldsManage(this.value); 
    }); 
}); 

Answer 2

Tại sao bạn nhân bản thay vì chỉ làm một cái gì đó như thế này (cùng với trình xử lý sự kiện hiện tại của bạn)?

$(".divWhereTheseGo").empty(); 
var count = 0; 
while (count < maxItems) { 
    $(".divWhereTheseGo").append("<fieldset id=\"" + count + "\">your form info</fieldset>"); 
    count++; 
} 

count trong fieldset là cách bạn có thể xử lý vấn đề id duy nhất.