Javascript 选择更改时显示大于/小于的隐藏字段集

我有一个表单，它将包含4个字段集。用户必须至少填写1个字段集，但可以选择填写其他字段集。每个字段集的内容都是相同的

我希望他们能够从下拉列表中选择一些要显示的字段集。从下拉列表中选择一个数字时，会出现相应数量的字段集

因此，如果他们从数量下拉列表中选择3，则应显示前3个字段集。如果他们改变主意，降到2个字段集，则第3个字段集应再次隐藏

这是基本的HTML

<form>
    <select id="quantity" name="quantity">
        <option disabled="disabled">xx</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <fieldset id="fieldset_name_1">Form Area 1</fieldset>
    <fieldset id="fieldset_name_2" style="display: none;">Form Area 2</fieldset>
    <fieldset id="fieldset_name_3" style="display: none;">Form Area 3</fieldset>
    <fieldset id="fieldset_name_4" style="display: none;">Form Area 4</fieldset>

</form>​

所以我已经正确地显示了字段集，我只是不知道如何在更改或再次按键时隐藏它们

---

我相信这很简单，但我认为我对PHP的熟悉让我一直在尝试以与jQuery/javascript完全不同的方式编写代码。

要隐藏未选中的内容，请在显示选定内容之前隐藏所有内容：

fieldsets.hide().slice(0, +qty).show();

---

尝试先隐藏全部，然后根据选择显示：

样本：

var registerCount = function() {
    var qty = $(this).val();

    var fieldsets = $('fieldset');
    fieldsets.each(function (){
       $(this).hide();
    });

    fieldsets.slice(0, qty ).show();  
}

$("#quantity").change(registerCount).keypress(registerCount);

---

您可以动态放置字段集，以不隐藏它们

$(function(){
    $('#quantity').change(function(){
        $('#fieldsets').html('');
        n = $(this).val();
        for (i=1; i<=n; i++){
            $('<fieldset/>', {
                id: 'fieldset_name_'+i,
                text: 'Form Area '+i
            }).appendTo('#fieldsets');
        }
    });
})​

演示：

以下是答案

---

希望它能有所帮助

我认为您应该动态创建字段集元素，而不是显示/隐藏现有的ones@Bergi我可能应该这样做，但每个字段集都需要一整块PHP来生成。我知道我可以将其应用到JS解决方案中以生成字段集，但我没有时间在这项工作上花更多的时间在这个表单上：感谢所有人的建议。在接下来的几个小时里，我必须专注于另一份工作，但我会尽快回来，选择最好的答案。这很有魅力，绝对是最简洁的答案-谢谢！除非需要闭包来处理单个元素，否则jQuery中永远不需要each

$(function(){
    $('#quantity').change(function(){
        $('#fieldsets').html('');
        n = $(this).val();
        for (i=1; i<=n; i++){
            $('<fieldset/>', {
                id: 'fieldset_name_'+i,
                text: 'Form Area '+i
            }).appendTo('#fieldsets');
        }
    });
})​