隱藏選擇2選項

我試圖隱藏某些選擇2選項，但是當我做這樣的事情：隱藏選擇2選項

<option style="display: none;">...</option>

選擇2忽略它，當我禁用選項，或使其不像「只讀」。

任何想法？

來源

2014-03-03 Tomer Amir

我解決同樣的問題，你可以看到這個話題，HTTP：//計算器。 com/questions/25064487/select2-hide-certain-options-dynamically/25085053＃25085053 – holmes2136

爲什麼你需要那個？簡單：刪除此選項！

如果您只需要在某些情況下顯示，您可以使用JavaScript。使用

jQuery的例子：

if (condition) { 
    $('#yourselect').append('<option value="foo" selected="selected">Foo</option>'); 
}

來源

2014-03-03 10:22:58 user3279626

我已經這樣做了，但我希望能有一個更優雅的解決方案。 –

+18

我厭倦了只告訴你不要做某些事情的答案。如果他想保持排序順序，他計劃再次顯示一個選項呢？ –

-4

您可以disabled="disabled"屬性禁用它。

<option value="4" disabled="disabled">Product 4</option>

請參閱本fiddle

來源

2014-03-03 10:27:27

這不會隱藏選項......而你的例子很簡單，我正在討論select2插件。 –

添加一些CSS，它會''.select2-container - default .select2-results__option [aria-disabled = true] {display：none;}' –

也許問題是舊的，但我在這裏得到了同樣的問題。。我現在用的是選擇2 v 3.5.1，我能解決這個問題是這樣的：

我添加的選項一個類，我想隱藏：

<option class="hide_me">...</option>

那應該是是這樣的：

.hide_me { 
    display: none!important; 
}

基本上我做你由樣式屬性做什麼，但使用的CSS類相同。樣式屬性對我也不起作用（即使多選select2似乎以這種方式隱藏選定的選項）。

希望這可以幫助。

來源

2014-10-08 13:20:59 lzzluca

關於select2 v3.5.1的IDK，但是這個解決方案不起作用V4。 – naXa

您應該刪除應該不可用的選項。如果您需要在JavaScript中動態執行此操作，則可以首先克隆完全填充的元素<select>。在任何時候，您可以從原始<select>中刪除所有選項，並只複製您目前可用的選項。這樣，你不會丟失任何造型，元數據，排序等

下面是一個例子：

$(document).ready(function() { 
    var select = $(".yourselect"); 
    var selectClone = select.clone(); 

    function updateSelect() { 
     var oldVal = select.val(); 

     // first, remove all options 
     select.find("option").remove(); 

     // now add only those options that should be available from the clone 
     // replace "data-show='yes'" with whatever you criteria might be 
     var options = selectClone.find("option[data-show='yes']").clone(); 
     select.append(options); 

     // restore previously selected value if it is still possible 
     if (select.find("option[value='" + oldVal + "']").length === 0) { 
      oldVal = ""; 
     } 
     select.val(oldVal); 

     // update select2 
     select.trigger('change'); 
    } 
});

來源

2017-05-17 16:43:19 nharrer

隱藏選擇2選項

回答

相關問題