Question

<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>

I have a row which have two different select. When ever both filled I want to show another row. How can it be achieved using jquery?

Answer 1

I am not sure what you mean by adding a new row. But generally, this is what you are looking for. You need to catch the change event of the last dropdown and create a copy of the row and append to its parent. Assuming your row span is inside a div with class container, This should work for your HTML markup you provided.

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

Here is a sample : http://jsfiddle.net/Dbq3D/12/

This wont validate whether both selects are filled because the mark up you provided has the first dropdown filled with a value already.