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