Question

我有一个包含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>

到目前为止，这是我的非常基本jQuery。我对客户端的东西很不错，通常把我的头埋在php中:)）

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

    var fieldsets = $('fieldset');

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


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

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

我确信这很简单，但我认为我对PHP的熟悉让我试着用jQuery / javascript方式完全不同地编写代码。

Answer 1

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

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

Answer 2

首先尝试隐藏所有内容，然后根据选择显示：

样品：

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);

Answer 3

您可以动态设置字段集以不隐藏它们。

$(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');
        }
    });
})

演示：http://jsfiddle.net/JmeYZ/

Answer 4

以下是答案，

http://jsfiddle.net/mQ23q/

希望它会有所帮助

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

4 个答案: