Question

我有动态表单，使用javascript和jQuery克隆以下表单部分。克隆部分对我来说很好。但我想在不同div的同一页面中添加表单的动态预览，作为所选选项的列表。

如果有人选择Option 1，则会预览

1. Option 1.

然后，如果添加了一个部分并从克隆部分中选择Option 2，则会预览

1. Option 1
2. Option 2

如果删除某个部分，比如第一部分，则预览会自动更新并显示

1. Option 2.

任何建议如何实现？

这是我的表格：

<form id="form">
    <div id="sections">
        <div class="section">
            <select name="form">
                <option value="option 1">Option 1</option>
                <option value="option 2">Option 2</option>
                <option value="option 3">Option 3</option>
            </select>
            <p><a href="#" class='remove'>Remove Section</a></p>
        </div>
    </div>
    <p><a href="#" class='addsection'>Add Section</a></p>
</form>

和Javascript：

var template = $('#sections .section:first').clone();
var sectionsCount = 1;
$('body').on('click', '.addsection', function() {

    sectionsCount++;
    var section = template.clone().find(':input').each(function(){
        var newId = this.id + sectionsCount;
        $(this).prev().attr('for', newId);
        this.id = newId;

    }).end()

    .appendTo('#sections');
    return false;
});

$('#sections').on('click', '.remove', function() {
    $(this).parent().fadeOut(300, function(){
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});

更新：非常感谢工作小提琴的例子。

Answer 1

在您希望预览的表单中添加<div>

<form id="form">
    <div id="sections">
        <div class="section">
            <select name="form" id="MySelect">
                <option value="option 1">Option 1</option>
                <option value="option 2">Option 2</option>
                <option value="option 3">Option 3</option>
            </select>
            <p><a href="#" class='remove'>Remove Section</a></p>
        </div>
    </div>
    <p><a href="#" class='addsection'>Add Section</a></p>

    <div class="MyPreview">

    </div>

</form>

克隆部分对我来说很好。

克隆时将克隆的部分附加到div

$(".MyPreview").append( "<p>1. Option 1. </p>" );

尝试这样的事情，我还没有检查过，

var i = 1;
$('body').on('click', '.addsection', function() {

    sectionsCount++;
    var section = template.clone().find(':input').each(function(){
        var newId = this.id + sectionsCount;
        $(this).prev().attr('for', newId);
        this.id = newId;

    }).end()

    .appendTo('#sections');

    var e = document.getElementById("MySelect");
    var MyValue = e.options[e.selectedIndex].value;
    var MyOption = e.options[e.selectedIndex].text;

    $(".MyPreview").append( "<div class='"+ MyValue +"'>" + i + "." + MyOption +". </p>" );
    i++;

    return false;
});

将选项的值作为类添加到div，以便删除使用类删除div。

$(".MyValue").remove();


$('#sections').on('click', '.remove', function() {
   $(this).parent().fadeOut(300, function(){
       $(this).parent().parent().empty();
       return false;
   });

   var e = document.getElementById("MySelect");
   var MyValue = e.options[e.selectedIndex].value;

   $(".MyValue").remove();

   return false;
});

希望它适合你

如何在jQuery中为动态表单创建动态预览

1 个答案: