jquery刪除/隱藏列表選項不包含其他列表中的字符串值

更新選擇選項時出現問題。jquery刪除/隱藏列表選項不包含其他列表中的字符串值

<select id="all"> 
    <option value="Volvo_A">Volvo_A</option> 
    <option value="Volvo_B">Volvo_B</option> 
    <option value="Volvo_C">Volvo_C</option> 
    <option value="Saab_A">Saab_A</option> 
    <option value="Saab_B">Saab_B</option> 
    <option value="Saab_C">Saab_C</option> 
    <option value="Saab">Saab</option> 
    <option value="Mercedes_A">Mercedes_A</option> 
    <option value="Mercedes_B">Mercedes_B</option> 
    <option value="Mercedes_C">Mercedes_C</option> 
    <option value="Mercedes">Mercedes</option> 
    <option value="Audi_A">Audi_A</option> 
    <option value="Audi_B">Audi_B</option> 
    <option value="Audi_C">Audi_C</option> 
</select> 

<select id="type"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<button type="button" id="Filter">Filter</button>

我想更新選擇列表與id全部基於選擇列表與id類型使用jquery的值。例如，如果volvo從id類型的select中選擇，那麼所有選擇列表中沒有包含volvo的所有選項都應該暫時隱藏。我該如何做到這一點。

我試過下面的代碼，但沒有工作。

$("#Filter").click(function(event) { 
    var filter = $("#type").val(); 
    $("#all > option[value != filter]").remove(); 
});

來源

2014-04-14 rkrara

你卡在哪裏？發佈你自己的嘗試！ –

現在我添加了我嘗試過的代碼，但沒有奏效。 – rkrara

如果你.remove（），那麼他們走了。如果您希望能夠更改類型並重新篩選，則需要隱藏/禁用。你也不符合確切的值，但子字符串。 – Adam

http://jsfiddle.net/H2eCw/

$("#Filter").click(function(event) { 
    var filter = $("#type").val(); 
    console.log($("#all > option:not([value^=\"Volvo\"])")); 
      console.log(filter); 
    $("#all > option").show(); 
    $("#all > option:not([value^=\""+filter+"\"])").hide(); 
    $("#all").val($('#all>option:visible:first').val()); 
      //$("#all > option:not[value ^= "+filter+"]").remove(); 
});

顯示/隱藏，而不是刪除..

來源

2014-04-14 12:04:23

嗨，我試過了，但它似乎在尋找完全匹配。如何更改此[值^ = \「」+ filter +「\」]以匹配substr。例如。 abc應該匹配def_abc_xyf。謝謝 – rkrara

@rkrara只是把'^ ='改成'* ='，所以它會是'$（「＃all> option：not（[value * = \」「+ filter +」\「]）」）。（）;'多數民衆贊成在說，價值包含過濾器 –

繼承人圖表我使用很多時，啓動jQuery .. .. https://cdn.tutsplus.com/net/uploads/legacy/154_cheatsheet/jquery12_colorcharge.png –

$(function(){ 
    $('#type').change(function(){ 
     var val_type = $(this).val().toLowerCase(); 
     $('option', '#all').each(function(){ 
      if($(this).val().toLowerCase().indexOf(val_type) === -1){ 
       // Not right type 
       $(this).prop('disabled', true).hide(); 
      } else { 
       // Is right type 
       $(this).prop('disabled', false).show(); 
      } 
     }); 
     // If the selected option is not longer possible then choose the first possible option 
     if($('option', '#all').filter(':selected').is(':disabled')){ 
      $('#all').val($('option', '#all').not(':disabled').first().val()); 
     } 
    }).change(); 
});

注：我已經通過通風口否則沒有選定toLowerCase（）的對比情況，insenitive。看它工作here。

但是，更好的性能選擇方案是在#all select中的每個選項中添加一個類，以匹配允許的值。

編輯：剛剛看過濾器按鈕。最初是因爲想要在變化事件上讀到它，所以我就是這麼做的。但不難轉換代碼點擊運行的代碼點擊。

編輯：Here是一個使用類的版本，如果列表變大，這將更有效。

來源

2014-04-14 12:03:33 Adam

感謝它的工作。 – rkrara

非常感謝這份名單真的很大。 – rkrara

繼承人它的jsfiddle

工作。

function Test(val){ 

    $("#all > option").each(function() { 
     if(this.value.indexOf(val)== -1){ 
      $(this).remove(); 
     } 
}); 
}

來源

2014-04-14 12:10:28 jbyrne2007

列表選擇器嗨，感謝您的回覆。一個問題。第二次更改/選擇類型列表時，所有內容都會丟失。 – rkrara

對不起繼承人一個更好的：[$ jsfiddle.net/qBunZ/1/]'$（this）.show（）;' – jbyrne2007

非常感謝。 – rkrara

jquery刪除/隱藏列表選項不包含其他列表中的字符串值

回答

相關問題