0 
<span id="row-0" class="row">
   <span class="Foo">
      <select name="first[]">
            <option value="XX">XX</option>
            <option value="YY">YY</option>
            <option value="ZZ">ZZ</option>
      </select>
   </span>
   <span class="Foo">
       <select name="second[]">
            <option value=""></option>
            <option value="AA">AA</option>
            <option value="BB">BB</option>
            <option value="CC">CC</option>
        </select>
   </span>
</span>

私は2つの異なる選択を持つ行を持っています。両方がいっぱいになったら、別の行を表示したいと思います。jqueryを使用してどのように達成できますか?

4

2 に答える 2

2

新しい行を追加するという意味がわかりません。しかし、一般的に、これはあなたが探しているものです。最後のドロップダウンの変更イベントをキャッチし、行のコピーを作成してその親に追加する必要があります。行スパンが class の div 内にあると仮定するとcontainer、これは提供した HTML マークアップで機能するはずです。

$(function(){   
    $(".container").on("change",".Foo:last",function(){
       var item=$(this);
       var rowClone=item.closest(".row").clone();   
       item.closest(".container").append(rowClone);
    });
});

ここにサンプルがあります: http://jsfiddle.net/Dbq3D/12/

指定したマークアップの最初のドロップダウンに値が既に入力されているため、これは両方の選択が入力されているかどうかを検証しません。

于 2012-05-21T23:02:52.543 に答える
1

うーん..最初のオプションを「選択してください」にするのはどうですか

$("select").change(function(){
   if ($("#row-0").find(':selected').not(:contains('make your choice')).size()>1)  
     {$("#row-0").append('<br/> yournewLine');}  
});

...それは私には自然な方法のようです..お役に立てば幸いです

@Roko C. Buljan は次のように言っています。:selected - Selector のようなものを使用することで、これも簡単になると思います。

$("select").change(function(){
    /*better read the value first*/
   $(":selected").not(:contains('make your choice')).remove();
});
于 2012-05-21T23:32:41.163 に答える