цикл jQuery для создания элементов
У меня не было удачи с этой задачей, до сих пор настолько благодарной ни за какую справку.
У меня есть форма HTML, в которой существует маленькое избранное меню (1-10) т.е.
<select>
<option value = '1'>1</option>
<option value = '2'>2</option>
...
<option value = '10'>10</option>
</select>
в зависимости от того, какое значение выбрано, я хотел бы, чтобы jQuery создал (или удалил) что количество входных текстовых полей (с различными именами и идентификатор). например, если бы 2 был выбран, то эти исходные данные были бы созданы:
<input type = 'text' name = 'name1' id = 'id1' />
<input type = 'text' name = 'name2' id = 'id2' />
я с нетерпением жду Ваших несомненно простых и изящных решений! andy
3 ответа
Что-то вроде этого:
$('select').change(function() {
var num = parseInt($(this).val(), 10);
var container = $('<div />');
for(var i = 1; i <= num; i++) {
container.append('<input id="id'+i+'" name="name'+i+'" />');
}
$('somewhere').html(container);
});
<select>
<option value = '1'>1</option>
<option value = '2'>2</option>
...
<option value = '10'>10</option>
</select>
<div id="container">
</div>
Для вашей разметки.
Тогда
$('select').bind('change', function () {
var val = parseInt($(this).val(), 10) + 1,
str = '';
for (var i=1; i<val;i++) {
str += '<input type="text" name="name' + i + '" id="id' + i + '"/>';
}
$('#container').html(str);
});
Чтобы немного изменить ответ Тату:
$('select').change(function() {
var num = parseInt($(this).val(), 10);
var container = $('<div />');
for(var i = 1; i <= num; i++) {
$('<input />', {
id: "id" + 1,
name: "name" + 1
}).appendTo(container);
}
$('somewhere').html(container);
});
Этот способ быстрее и немного легче читается. Причина, по которой это быстрее, заключается в том, что jQuery сильно кеширует создание элементов. Он кэширует "" в первый раз, а затем просто использует кэшированный объект для создания большего количества из них. Он может это сделать, потому что текст не меняется. Однако он не может выполнить это кеширование с помощью добавления (или html, не созданного путем вызова основной функции jquery $ AFAIK), поскольку из-за идентификаторов они уникальны для каждого цикла. См. Доклад Джона Ресига «Вещи, которые вы могли не знать о jQuery» для получения информации об этом.