JQuery копия div

Question

Я пытаюсь настроить форму, в которой на основе значения поля выбора 1,2,3,4, чтобы он отображал на странице следующий код только количество раз, которое соответствует значению поля выбора .

<div id='guestDetails'>
            <tr>
            <td>Guest ".$cnt."'s Name</td>
            <td>Guest ".$cnt."'s Address</td>
            <td>Guest ".$cnt."'s Phone</td>
            <td>Guest ".$cnt."'s Email</td>
            </tr>

            </tr>
            <tr>
            <td><input type='text' name='guest".$cnt."Name' /></td>
            <td><input type='text' name='guest".$cnt."Address' /></td>
            <td><input type='text' name='guest".$cnt."Phone' /></td>
            <td><input type='text' name='guest".$cnt."Email' /></td>
            </tr>

                </div>

Таким образом, если значение выбора равно 2, то эти поля ввода будут отображаться 2 раза. Если значение изменить на 3, то они будут там 3 раза. Не совсем уверен, как это сделать.

Answer 1

Основной подход:

1) Создайте скрытый «шаблон», который мы будем копировать, и контейнер div, в который мы будем помещать копии:

<div id='guest_detail_template' style='visibility:hidden;position:absolute'>
    <table>
        <tr>
            <td>Guest 's Name</td>
            <td>Guest 's Address</td>
            <td>Guest 's Phone</td>
            <td>Guest 's Email</td>
        </tr>
        <tr>
            <td><input type='text' name='guestName' /></td>
            <td><input type='text' name='guestAddress' /></td>
            <td><input type='text' name='guestPhone' /></td>
            <td><input type='text' name='guestEmail' /></td>
        </tr>
    </table>
</div>
<div id='guest_details'></div>

2) Настройте функцию, которая добавляет копию шаблона в контейнер. Вы используете .clone() метод выбора JQuery для создания копии, исправляете стиль, чтобы копия не была скрыта, и используете append на контейнере (после выбора), чтобы поместить новый элемент в конец.

function add() {
    var item = $('#guest_detail_template').clone();
    item.attr({'style': ''});
    $('#guest_details').append(item);
}

3) Вызовите функцию столько раз, сколько необходимо, или в каком-либо контексте.

4) Чтобы сделать полученную форму полезной, вам нужно знать, какое имя соответствует какому адресу и т. Д. Для этого вам понадобятся разные имена для <input> s в каждой копии <div> , Вы можете сделать это, используя .find для нового элемента, чтобы выбрать <input> s, а затем снова вызвать .attr(), на этот раз используя некоторую вложенную функцию, чтобы внести соответствующие изменения в имя, указанное в шаблоне. (Подсказка: передайте значение, которое вы в настоящее время называете $cnt в качестве параметра, add() и соедините его там, где это необходимо.)

Answer 2

Вы можете сделать это так.Это не совсем то, что вы делаете, но я надеюсь, что вы поймете, как это сделать.

HTML:

<select id="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="display_section">
    <input type="text" name="txt[]" value="" />
<div>

Javascript:

$(document).ready(function() {
    var append_str = '<input type="text" name="txt[]" value="" /><br />';

    $('#number').change(function() {
        var total = parseInt($(this).val());
        $('#display_section').html(function() {
            var temp_str = '';
            for (i = 0; i < total; i++) {
                temp_str = temp_str + append_str;
            }

            return temp_str;
        });
    });
});

Демо: http://jsfiddle.net/ynhat/tA4wH/5/

Answer 3

Просто добавление HTML не будет работать в вашем случае. Переменные PHP должны быть жестко запрограммированы, иначе они будут отображаться в виде текста. Вам нужно будет либо выполнить AJAX, либо написать весь HTML-код для шаблона на стороне сервера, а затем немного поработать с JavaScript.

Answer 4

Во-первых, ваша разметка может быть неправильной. Вы не должны помещать DIV, как это, между TR.

Вот подход для копирования ваших входных элементов:

Добавьте идентификатор, скажем, guestInputs, к TR, который содержит ваши элементы ввода.

Добавить слушателя в избранное - $("#selectID").change(methodName)

В этом методе получите число, выбранное пользователем, используя $("#select").val()*1, и используйте его для зацикливания и создания новых полей ввода, как показано ниже.

var newRow = $("#guestInputs").clone(); // clone the item
newRow.attr("id", "guestInputsNew"); // change the ID to avoid conflict
$("#guestInputs").parent().append(newRow); // append it to the table

Обратите внимание, что вы можете изменить несколько идентификаторов в новой строке, прежде чем прикреплять их к таблице.

Answer 5

Добавить прослушиватель событий в поле выбора,

$("#number_of_inputs").change(function() { /* value has changed */ });

Вы можете получить выбранный номер в обратном вызове .change по

Number($(this).val());

Затем напишите функцию, которая берет индекс и генерирует указанную вами разметку, после чего очищает содержащий div и добавляет к нему вызов функции в цикле. Например:

$("#number_of_inputs").change(function() {
  $("#container").html("");
  for (var i = 0; i < Number($(this).val()); ++i) {
    $("#container").append(generateForm(i));
  } 
});