1

特定の製品の必要量を尋ねるフォームについて質問があります。

<select name="select-number" id="select-number">
    <option value="">Please select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

この質問への回答に基づいて、各オプションの後続のセクションを表示したいと思います (この例では、0 から 3 のセクションが表示されます)。

<div class="item-details" id="item-1">
    Follow-up questions item 1
</div>

<div class="item-details" id="item-2">
    Follow-up questions item 2
</div>

<div class="item-details" id="item-3">
    Follow-up questions item 3
</div>

divクラスを使用して正しい数のs をループし、クラス.item-detailsを追加するだけでよいように、CSS を設定しました.state--visible。

これを達成するための最も効率的な方法は何ですか? for選択した値に基づいてループする必要があると思いますが、これまでのところ失敗しています。私のコードはこの jsFiddleで見ることができます。乾杯。

編集

私は自分自身をうまく説明できなかったと思います。選択したオプションに基づいて1 つのセクションを表示するだけでなく、前のセクションもすべてループして表示する必要があります。したがって、ドロップダウンからオプション 2 を選択すると、#item-1との両方が表示されます (クラス#item-2の最初の 2 つのインスタンス) 。.item-details

4

2 に答える 2

1

デモ

$('#select-number').change(function() {
    var details = $('.item-details'),
        number = $(this).val();

    details.removeClass('state--visible');

    for(var i=1; i<=number; i++){
        $('#item-' + i).addClass('state--visible');   
    }

}).change();

それを行う別の方法は次のとおりです。(上記のforループを置き換えます):

$.each(this.options, function(i, val){
    $('#item-' + val.value).addClass('state--visible');   
    if(val.value == number){
        return false;
    }
});

これの利点は、柔軟性がわずかに高いことです。オプション値が数値的で連続的であることに依存しません。したがって、たとえば<option value="aaa">とペアにすることができます#item-aaa。

于 2013-10-16T13:56:10.800 に答える