循環選擇列表菜單創建搜索過濾器

我知道我問的問題很長，但我真的需要這個解決方案。我需要爲搜索過濾器選項創建一個搜索選擇框looping。例如，循環選擇列表菜單創建搜索過濾器

最初，當我從列表中選擇名稱時，會出現一個包含5個列表項的選擇菜單，然後我應該在旁邊的文本框中輸入特定數據。（如圖1所示）
現在我需要添加另一行選擇菜單。通過點擊旁邊的+按鈕，我應該可以添加另一行，當添加另一個選擇菜單時，第一行的+按鈕將變爲關閉（X）按鈕
當生成新行時，選擇菜單應該嘔吐先前選擇的項目意味着它現在應該只包含4個項目。並加上+和X按鈕。
重複同樣的情況直到選擇菜單中的項目結束。

之後，我需要添加另一個選擇菜單輸入另一組數據，在這種情況下，以前選定的項目不應該存在於循環選擇菜單

下面是基本code updated

圖像1

enter image description here

圖片2

enter image description here

注：在我的小提琴普萊舍Refre酒店的第一個動作，當你點擊+按鈕，我需要當環形排的按鈕，點擊相同的效果，只要我點擊第一個+按鈕它應該轉到關閉按鈕。

來源

2013-04-14 Sowmya

對不起，有什麼問題嗎？ – Uby

當我點擊加號菜單並將該菜單轉換爲X時，我需要重複在小提琴中給出的div。我希望我在問題 – Sowmya

中提供了足夠的信息如果您也提供了JS代碼，我們可以嘗試幫助您。我想你知道你不能在這裏要求代碼。 – Uby

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-14 14:20:25

謝謝:) :)。 – Sowmya

循環選擇列表菜單創建搜索過濾器

回答

相關問題