如何隱藏JavaScript選擇選項？ （跨瀏覽器）

Question

這應該工作：

$('option').hide(); // hide options 

它工作在Firefox，而不是瀏覽器（也可能不是在IE中，未測試）。

一個更有趣的例子：

<select> 
    <option class="hide">Hide me</option> 
    <option>visible option</option> 
</select> 
<script type="text/javascript"> 
// try to hide the first option 
$('option.hide').hide(); 

// to select the first visible option 
$('option:visible').first().attr('selected', 'selected'); 
</script> 

或者看到http://jsfiddle.net/TGxUf/

的例子是分離從DOM選項元素的唯一選擇？我需要稍後再顯示它們，所以這不會很有效。

Answer 1

不幸的是，您無法在所有瀏覽器中隱藏option元素。

時，我都需要做到這一點過去，我已經設置了disabled屬性，像這樣......

$('option').prop('disabled', true); 

我然後用它在瀏覽器中使用這塊支持隱藏的CSS ...

select option[disabled] { 
    display: none; 
} 

Answer 2

隱藏<option>元素不在規範中。但你可以disable他們，這應該跨瀏覽器工作。

$('option.hide').prop('disabled', true); 

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

Answer 3

試試這個：

$(".hide").css("display","none"); 

但我認爲這是沒有意義的隱藏它。如果你想刪除它，只是：

$(".hide").remove(); 

Answer 4

既然你提到你想以後再重新添加的選項，我建議您加載一個數組或對象與選擇框的內容在頁面加載 - 這樣，如果您需要恢復原始選擇，您始終擁有一個「主列表」。

我做了一個簡單的例子，消除在選擇，然後還原按鈕的第一要素投入的選擇框回到它的原始狀態：

http://jsfiddle.net/CZcvM/

Answer 5

它有裂紋，我自己，這是我想出了：

(function($){ 

    $.fn.extend({detachOptions: function(o) { 
     var s = this; 
     return s.each(function(){ 
      var d = s.data('selectOptions') || []; 
      s.find(o).each(function() { 
       d.push($(this).detach()); 
      }); 
      s.data('selectOptions', d); 
     }); 
    }, attachOptions: function(o) { 
     var s = this; 
     return s.each(function(){ 
      var d = s.data('selectOptions') || []; 
      for (var i in d) { 
       if (d[i].is(o)) { 
        s.append(d[i]); 
        console.log(d[i]); 
        // TODO: remove option from data array 
       } 
      } 
     }); 
    }}); 

})(jQuery); 

// example 
$('select').detachOptions('.removeme'); 
$('.b').attachOptions('[value=1]');'); 

你可以看到在http://www.jsfiddle.net/g5YKh/

的的例子元素完全從select中刪除，並可以通過jQuery選擇器重新添加。

可能需要一點工作和測試，然後才能適用於所有情況，但它足夠滿足我所需。

Answer 6

我知道這有點晚，但比從來沒有晚過！這是一個非常簡單的方法來實現這一點。只需要顯示和隱藏功能。隱藏功能只是將每個選項元素附加到預定（隱藏）的span標籤（這應該適用於所有瀏覽器），然後show功能將該選項元素移回到您的選擇標籤中。 ;）

function showOption(value){ 
    $('#optionHolder option[value="'+value+'"]').appendTo('#selectID');    
} 

function hideOption(value){ 
    $('select option[value="'+value+'"]').appendTo('#optionHolder'); 
} 

Answer 7

三年了，但我的谷歌搜索帶我到這裏，所以希望我的回答對別人有用。

我剛剛創建了第二個選項（我用CSS隱藏）並使用Javascript將它們之間的前後移動。

<select multiple id="sel1"> 
    <option class="set1">Blah</option> 
</select> 
<select multiple id="sel2" style="display:none"> 
    <option class="set2">Bleh</option> 
</select> 

類似的東西，然後像這樣的東西將項目移動到列表（即，使其可見）。很明顯，根據您的需要調整代碼。

$('#sel2 .set2').appendTo($('#sel1')) 

Answer 8

正如人們所說的，你不能display:none個人<option> S，因爲他們不是正確的DOM元素。

您可以設置.prop('disabled', true)，但這隻會弄髒元素並使其無法選擇 - 它們仍佔用空間。

我使用的一種解決方案是將.detach()的<select>轉換成頁面加載時的全局變量，然後只加上你想要的<option>。像這樣的東西（http://jsfiddle.net/mblase75/Afe2E/）：

var $sel = $('#sel option').detach(); // global variable 

$('a').on('click', function (e) { 
    e.preventDefault(); 
    var c = 'name-of-class-to-show'; 
    $('#sel').empty().append($sel.filter('.'+c)); 
}); 

起初我還以爲你會附加在他們面前的<option>■找到.clone()，但顯然不是。原始全局$sel在click代碼運行後未改變。

---

如果你有反感的全局變量，可以存儲包含<select>元素本身（http://jsfiddle.net/mblase75/nh5eW/）上的選項作爲.data()變量jQuery對象：

$('#sel').data('options', $('#sel option').detach()); // data variable 

$('a').on('click', function (e) { 
    e.preventDefault(); 
    var $sel = $('#sel').data('options'), // jQuery object 
     c = 'name-of-class-to-show'; 
    $('#sel').empty().append($sel.filter('.'+c)); 
}); 

Answer 9

只需修改dave1010的代碼我需要

(function($){ 
    $.fn.extend({hideOptions: function() { 
     var s = this; 
     return s.each(function(i,e) { 
      var d = $.data(e, 'disabledOptions') || []; 
      $(e).find("option[disabled=\"disabled\"]").each(function() { 
       d.push($(this).detach()); 
      }); 
      $.data(e, 'disabledOptions', d); 
     }); 
    }, showOptions: function() { 
     var s = this; 
     return s.each(function(i,e) {  
      var d = $.data(e, 'disabledOptions') || []; 
      for (var i in d) { 
       $(e).append(d[i]); 
      } 
     }); 
    }});  
})(jQuery); 

http://jsfiddle.net/AbzL3/1/

Answer 10

我以爲我是光明;-)

在CSS：

option:disabled {display:none;} 

在Firefox和Chrome，只有創建啓用選項的選擇。尼斯。

在IE中，顯示了啓用的選項，其中只有空行的殘疾人處於原始位置。壞。

在Edge中，啓用的選項顯示在頂部，後面是禁用選項的空白行。可接受的。

Answer 11

這裏有一個選項：

• 作品在所有瀏覽器
• 過濾
• 拆卸時果脯項目的順序時，果脯當前選擇/恢復
• 沒有髒的黑客/無效HTML

`

$('select').each(function(){ 
    var $select = $(this); 
    $select.data('options', $select.find('option')); 
}); 

function filter($select, search) { 
    var $prev = null; 
    var $options = $select.data('options'); 
    search = search.trim().toLowerCase(); 
    $options.each(function(){ 
     var $option = $(this); 
     var optionText = $option.text(); 
     if(search == "" || optionText.indexOf(search) >= 0) { 
      if ($option.parent().length) { 
        $prev = $option; 
       return; 
      } 
      if (!$prev) $select.prepend($option); 
      else $prev.after($option); 
      $prev = $option; 
     } 
     else { 
       $option.remove(); 
     } 
    }); 
} 

`

的jsfiddle：https://jsfiddle.net/derrh5tr/

Answer 12

你可以嘗試包裹選項元素的跨度使內部的他們不會是可見的，但在DOM中仍然加載。如下所示

jQ('#ddlDropdown option').wrap('<span>'); 

並展開包含'selected'屬性的選項，如下所示以顯示已選擇的選項。

var selectedOption = jQ('#ddlDropdown').find("[selected]"); 
jQ(selectedOption).unwrap(); 

這適用於所有瀏覽器。

Answer 13

如果您保留對象並以簡短的方式對其進行過濾，則有可能。

<select id="driver_id"> 
<option val="1" class="team_opion option_21">demo</option> 
<option val="2" class="team_opion option_21">xyz</option> 
<option val="3" class="team_opion option_31">ab</option> 
</select> 

-

team_id= 31; 

var element = $("#driver_id"); 
originalElement = element.clone(); // keep original element, make it global 


element.find('option').remove(); 
originalElement.find(".option_"+team_id).each(function() { // change find with your needs 
     element.append($(this)["0"].outerHTML); // append found options 
}); 

https://jsfiddle.net/2djv7zgv/4/