jquery - 选择 n 个选项时使用 jquery 追加和删除 div

Question

在选择框中选择 n 个选项时，我想添加 n 个输入字段组。我能够在 div 中使用 jquery 成功追加，但是当我减少选择框中的 n 个数字时，它会擦除​​其他字段组中填充的所有数据。

总的来说，我需要的是，当我选择 5 次时，它应该附加字段组，然后当我们选择 4 时，最后附加的 div 应该被删除，如果其他 div 中填充了数据，它应该保留在那里。

这个怎么做

<select name="adults" id="adults" class="shadow">
 <option value="1">1 adult</option>
  <option value="2">2 adults</option>
 <option value="3">3 adults</option>
  <option value="4">4 adults</option>
 <option value="5">5 adults</option>
 </select>

<div id="content"></div>

<script>
        var content = $("#content");
        $("#adults").change(function() {
            newContent = "";
            for (var i = 2; i <= noofadult; i++) {
                newContent += '<div class="o-accent-box u-clearfix u-margin-bottom-medium passenger-detail"><h3 class="h5-like o-heading-icon icon-passenger">Passenger ' + i + ' (Adult)<span class="field-required">*</span></h3><div class="o-form-item form-item-title"><label for="title-select-{index}" class="u-visually-hidden">Title</label><select id="title-select-{index}" name="visitor[' + i + '][title]" required="" class="o-form-item__txt-input"><option value="">Title</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option></select></div><div class="o-form-item form-item-first-name"><label for="pax-first-name-0" class="u-visually-hidden">First Name</label><input id="pax-first-name-0" type="text" placeholder="First name(s)" name="visitor[' + i + '][firstName]" class="o-form-item__txt-input"></div><div class="o-form-item form-item-surname"><label for="pax-surname-0" class="u-visually-hidden">Surname(s)</label><input id="pax-surname-0" type="text" placeholder="Surname(s)" name="visitor[' + i + '][lastName]" class="o-form-item__txt-input"></div></div>';


            }

            content.html(newContent);

        }).trigger('change');;

    </script>

标签： jquery