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

Question

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

我需要为搜索过滤器选项创建一个循环搜索选择框。例如，

• 当我从列表中选择名称时，最初会有一个包含 5 个列表项的选择菜单，然后我应该在旁边的文本框中输入具体数据。 (如图1所示)
• 现在我需要添加另一行选择菜单。通过单击旁边的 + 按钮，我应该可以添加另一行，当添加另一个选择菜单时，第一行的 + 按钮应该变为关闭(X)按钮
• 当生成新行时，选择菜单应该放弃之前选择的元素，这意味着它现在应该只包含 4 个元素。以及 + 和 X 按钮。
• 重复相同的情况，直到选择菜单中的元素结束。

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

这是基本的 code updated

图 1

图 2

注意:在我的 fiddle 中，请在您单击 + 按钮时重新执行第一个操作，当循环行的按钮单击时我需要相同的效果，并且当我单击第一个 + 按钮时它应该变为关闭按钮。

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