循环选择列表菜单以创建搜索过滤器

Question

我知道我问的问题很长，但我真的需要这个解决方案。

我需要为搜索过滤器选项创建looping搜索选择框。例如，

• 当我从列表中选择名称时，最初会有一个包含5个列表项的选择菜单，然后我应该在旁边的文本框中输入特定数据。 （如图1所示）
• 现在我需要添加另一行选择菜单。通过单击旁边的+按钮我应该能够添加另一行，当添加另一个选择菜单时，第一行的+按钮应该转为关闭（X）按钮
• 当生成新行时，选择菜单应该呕吐先前选择的项目意味着它现在应该只包含4个项目。并且使用+和X按钮。
• 重复相同的情况，直到选择菜单中的项目结束。

之后我需要添加另一个选择菜单来输入另一组数据，在这种情况下，先前选择的项目不应出现在循环选择菜单中

以下是基本 code updated

图片1

图片2

注意：当我点击+按钮时，我的小提琴反射第一个动作，当循环行的按钮点击时我需要相同的效果，当我点击第一个+按钮它应该转向关闭按钮。

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