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

Question

I have a form which is going to contain 4 fieldsets. The user must fill in a minimum of 1 fieldset but can choose to complete additional fieldsets. Each fieldset's contents are identical.

I want them to be able to choose a number of fieldsets to show from a dropdown. On selecting a number from the dropdown the relevant number of fieldsets appears.

So if they choose 3 from the quantity dropdown, the first 3 fieldsets should be shown. If they change their mind and drop to 2 fieldsets then the 3rd should hide again.

Here's the base 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>​

And here's my very basic jQuery so far. I'm quite a noob to client side stuff, generally burying my head in php :)

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

    var fieldsets = $('fieldset');

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


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

So I've got it showing fieldsets correctly, I'm just not sure how to hide them on change or keypress again.

I'm sure this is simple but I think my familiarity with PHP keeps me trying to code things completely differently to the jQuery/javascript way.

Answer 1

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

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

Answer 2

Try hide all first and then show according to selection:

Sample:

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

You can put the fieldset dynamically to not hide them.

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

Demo: http://jsfiddle.net/JmeYZ/

Answer 4

Here is the answer,

http://jsfiddle.net/mQ23q/

Hope it will help