Используя jQuery для динамичного добавления полей формы (или fieldsets) на основе выпадающего значения поля
Как в заголовке говорится, что я пытаюсь сделать, должен иметь jQuery, добавляют много дополнительных fieldsets на основе значения, выбранного в выпадающем поле. Например, когда страница загружается, выпадающее имеет значение по умолчанию 1, и значение по умолчанию fieldset отображено. Теперь, если пользователь выбирает другое значение в этом выпадающем, количество fieldsets должно быть скорректировано соответственно посредством клонирования (я предполагаю, что это было бы лучшим решением). Вот то, что я имею до сих пор:
Выпадающий код поля...
<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...
$(document).ready(function() {
$("#itemCount").change(function(){
var itemCountVal = jQuery(this).val();
$("#item_dup_1").fieldsManage(itemCountVal);
});
});
... и сама функция (это на самом деле основано на плагине jQuery, который я думал, была хорошей начальной точкой для того, в чем я нуждаюсь):
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.
}
}
Объект, который клонируется, является чем-то как <fieldset id="item_dup_1"><input><input><input></fieldset>. Я не думаю, что необходимо показать полный код для него также.
Это работает как очарование на первое изменение, но если пользователь изменяет значение снова, именно тогда вещи идут не так, как надо, и вместо того, чтобы показать корректное количество fieldsets, это показывает больше. Похоже, что это вычисляет количество fieldsets, необходимого, начиная с нуля, игнорируя то, что fieldsets были уже добавлены, и это - какова моя проблема на самом деле. У меня также есть функция (не показанный здесь только для хранения в стороне вопроса и максимально короткий), который присваивает новые идентификаторы клонированному fieldset для предотвращения дублирующихся идентификаторов и который работает без помехи.
Я убежден, что делаю что-то не так, но я ударял головой о стену с этим в течение двух дней теперь, пытаясь найти то, что это без удачи вообще так, любая справка больше, чем ценилась бы!
Заранее спасибо!
2 ответа
I don't like the solution of Nate B.
- it needs an additional container element
- recreates everything, thus loosing data already entered
- creates a maintenance problem: html markup of the fieldset is duplicated (once in HTML, once as string for append)
- creates invalid id's for the fieldsets (id's can't start with a number)
This does what you want and similar to what you did. Keeps only the ids in a data attribute on the original element (instead of keeping the whole clone object which could use massive amounts of memory). Keeps all values already entered. Doesn't recreate everything if you change from e.g. 3 to 5. Instead only generates two new fieldsets. Removes them in reverse order they where created.
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);
});
});
Почему вы клонируете, а не просто делаете что-то вроде этого (вместе с вашим текущим слушателем событий)?
$(".divWhereTheseGo").empty();
var count = 0;
while (count < maxItems) {
$(".divWhereTheseGo").append("<fieldset id=\"" + count + "\">your form info</fieldset>");
count++;
}
Счетчик в наборе полей - это то, как вы можете обрабатывать проблема с уникальным идентификатором.