javascript - 選択した変更時よりも大きい/小さいフィールドセットを非表示にする

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/

それが役立つことを願っています