2

私はかなり長い質問をしていることを知っていますが、私は本当にこの解決策を必要としています.

looping検索フィルター オプションの検索選択ボックスを作成する必要があります。例えば、

  • リストから名前を選択すると、最初に 5 つのリスト項目を含む選択メニューが表示され、その横のテキスト ボックスに特定のデータを入力する必要があります。(画像1のように)
  • 次に、選択メニューの別の行を追加する必要があります。その横にある+ボタンをクリックすると、別の行を追加できるはずです。別の選択メニューが追加されると、最初の行の+ボタンが閉じる（X）ボタンに変わります
  • 新しい行が生成されると、選択メニューは以前に選択された項目を吐き出す必要があります。つまり、現在は 4 つの項目のみが含まれている必要があります。+ボタンとXボタンを押します。
  • 選択メニューの項目がなくなるまで、同じケースが繰り返されます。

その後、別の選択メニューを追加して別のデータ セットを入力する必要があります。この場合、以前に選択した項目は、ループされた選択メニューに表示されません。

これが更新された基本的なコードです

画像1

ここに画像の説明を入力

画像2

ここに画像の説明を入力

注：私のフィドルでは、+ボタンをクリックしたときに最初のアクションを参照してください。ループされた行のボタンをクリックすると同じ効果が必要で、最初の+ボタンをクリックするとすぐにボタンを閉じる必要があります。

4

1 に答える 1

1

LIVE DEMO

HTML:

<div class="filtr">

     <!-- we'll clone this one... -->   
    <div class="loop"> 
        <select>
            <option>By Name</option>
            <option>By ID</option>
            <option>By Place</option>
            <option>By Post</option>
            <option>By Tag</option>
        </select>
        <input type="text" />
        <button class="btn del">X</button>
        <button class="btn add">+</button>
    </div>
    <!-- here ...-->

</div>

CSS (IE9+):

.filtr{
    width:350px;
}
.loop {
    background:#ccc;
    display:inline-block;
}
.loop .add{
    display:none;
}
.loop:only-of-type .del{
    display:none;
}
.loop:only-of-type .add{
    display:inline;
}
.loop:last-of-type:not(:only-of-type) .add{
    display:inline;
}

jQuery:

$filtr = $('.filtr');

$filtr.on('click', '.add', function(){
   $(this).closest('.loop').clone().appendTo( $filtr );
});

$filtr.on('click', '.del', function(){
   $(this).closest('.loop').remove();
});
于 2013-04-14T14:20:25.407 に答える