javascript - 使用选择和复选框选择表单的重复完整字段集

Question

有一个带有名为“Samenstelling”的字段集的订单。该字段集包含一个下拉选择，其中包含名为“多少”的数字。

如果选择数字 2，则该字段集中的所有其他字段必须出现两次，如果选择数字 3，则所有字段必须出现三次。

必须复制的字段集位于下面。此外，如果字段完整并填写完毕，则必须将完整的表格邮寄到一个电子邮件地址。有人可以帮我吗？

   <fieldset id="fbrp__15"><legend>Samenstelling</legend> 
<div class="required"><label for="fbrp__201">How much</label>
 <select class="cms_dropdown" name="cntnt01fbrp__201">
 <option value=""> Selecteer &eacute;&eacute;n</option>
 <option value="1" selected="selected">1</option>
 <option value="2">2</option>
 <option value="3">3</option></select>

    </div> <div class="required"><label for="fbrp__35">Soort Sub*</label><select class="copy" name="cntnt01fbrp__35"><option value=""> Selecteer &eacute;&eacute;n</option><option value="11">Beef</option><option value="17">Chicken Fajita</option><option value="13">Chicken Teriyaki</option><option value="14">Gegrilde Kipfilet</option><option value="1" selected="selected">Ham</option><option value="7">Italian B.M.T.</option><option value="5">Kalkoenfilet</option><option value="2">Kalkoenfilet & Ham</option><option value="3">Meatball Marinara</option><option value="8">Spicy Italian</option><option value="12">Steak & Cheese</option><option value="10">Subway Club</option><option value="15">Subway Melt</option><option value="4">Surimi Crab</option><option value="9">Tonijn</option><option value="6">Veggie Delite</option><option value="16">Veggie Patty</option></select></div> <div><label    for="fbrp__36">Lengte</label><select class="copy" name="cntnt01fbrp__36"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">15 cm</option><option value="2">30 cm</option></select></div> <div><label for="fbrp__37">Soort brood</label><select class="copy" name="cntnt01fbrp__37"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Bruin</option><option value="2">Sesam</option><option value="3">Honey Oat</option><option value="4">Wit</option><option value="5">Cheese & Oregano</option></select></div> <div><label for="fbrp__38">Getoast</label><select class="copy" name="cntnt01fbrp__38"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div><div><label for="fbrp__39">        Kaas</label><select class="copy"    name="cntnt01fbrp__39"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected" >Pittig</option><option value="2">Normaal</option><option value="3">Geen</option></select></div><div><label for="fbrp__40">Extra kaas*</label><select class="copy" name="cntnt01fbrp__40"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div><div><label for="fbrp__41">Extra bacon*</label><select class="copy" name="cntnt01fbrp__41"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div> <div><label for="fbrp__42">Dubbel vlees*</label><select class="copy" name="cntnt01fbrp__42"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div><div>* Bijkomende kosten.</div><div>Groenten</div> <div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="1"  id="fbrp__43_1_0" />
    &nbsp;<label for="fbrp__43_1_0">Sla</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="2"  id="fbrp__43_1_1" />
    &nbsp;<label for="fbrp__43_1_1">Komkommer</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="3"  id="fbrp__43_1_2" />
   &nbsp;<label for="fbrp__43_1_2">Tomaat</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="4"  id="fbrp__43_1_3" />
   &nbsp;<label for="fbrp__43_1_3">Augurk</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="5"  id="fbrp__43_1_4" />
   &nbsp;<label for="fbrp__43_1_4">Paprika</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="6"  id="fbrp__43_1_5" />
   &nbsp;<label for="fbrp__43_1_5">Ui</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="7"  id="fbrp__43_1_6" />
   &nbsp;<label for="fbrp__43_1_6">Pepers</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="8"  id="fbrp__43_1_7" />
   &nbsp;<label for="fbrp__43_1_7">Olijven</label></div></div>                                 <div>Saus</div> <div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="1"  id="fbrp__44_1_0" />
   &nbsp;<label for="fbrp__44_1_0">Chipotle Soutwest</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="2"  id="fbrp__44_1_1" />
   &nbsp;<label for="fbrp__44_1_1">Honey Mustard</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="3"  id="fbrp__44_1_2" />
   &nbsp;<label for="fbrp__44_1_2">Sweet Onion Mayonaise</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="4"  id="fbrp__44_1_3" />
   &nbsp;<label for="fbrp__44_1_3">BBQ</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="5"  id="fbrp__44_1_4" />
   &nbsp;<label for="fbrp__44_1_4">Sweet Chilli</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="6"  id="fbrp__44_1_5" />
   &nbsp;<label for="fbrp__44_1_5">Knoflooksaus</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="7"  id="fbrp__44_1_6" />
   &nbsp;<label for="fbrp__44_1_6">Geen</label></div></div> </fieldset> 

Answer 1

你可以这样做:

HTML

查看我对新添加的 div 的 fiddle

id="fieldcontwrapper"和 id="fieldcont"

jQuery

$(".cms_dropdown").live('change', function () {

    var howmuch = $(this).val();
    var data = $("#fieldcont").html(); // DATA TO DUPLICATE

    // IF SELECTED <= 1, THEN REMOVE ALL DUPLICATES EXCEPT 1
    if (howmuch <= 1) {
        $("#fieldcontwrapper #fieldcont").not(':first').remove();
    } else {
        for (var i = 0; i < howmuch; i++) {
            $("#fieldcontwrapper")
            .append('<div id="fieldcont"> <hr />' + data + '</div>');
        }
    }

});

jSFiddle:http://jsfiddle.net/ZACXL/1/