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>

我有一排有两个不同的选择。当两个都填满时，我想显示另一行。使用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 回答