0

我有一个包含 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 方式完全不同的代码。

4

4 回答 4

1

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

fieldsets.hide().slice(0, +qty).show();
于 2012-08-23T19:11:25.093 回答
0

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

$(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/

于 2012-08-23T19:21:40.067 回答
0

这是答案，

http://jsfiddle.net/mQ23q/

希望它会有所帮助

于 2012-08-23T19:27:43.120 回答
0

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

样本：

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);
于 2012-08-23T19:11:52.647 回答