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>

我有一行有两个不同的选择。当两者都填满时我想要显示另一行。如何使用jquery实现？

Answer 1

我不确定添加新行是什么意思。但一般来说，这就是你要找的东西。您需要捕获最后一个下拉列表的更改事件并创建该行的副本并附加到其父级。假设您的行跨度位于具有类container的div中，这应该适用于您提供的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/

这不会验证两个选项是否都已填充，因为您提供的标记已经填充了第一个下拉值。

Answer 2

嗯..如何制作第一个选项“做出你的选择”

$("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();
});

下拉变化火表演相同的元素

2 个答案: