使用jQuery在IE中隱藏選擇選項

Question

目前我正在使用jQuery來隱藏/顯示使用以下代碼的選擇選項。

$("#custcol7 option[value=" + sizeValue + "]").hide(); 

這在Firefox中正常工作，但在其他瀏覽器中不起作用。如何在Chrome，Opera和IE中隱藏選項？

Answer 1

你不這樣做，它不支持在IE瀏覽器（並且可能不會在Chrome或Opera中）。如果你希望它們真的看不見，你將不得不完全刪除選項並在以後添加它們。但是在大多數情況下，簡單的disabled="disabled"就足夠了，比處理刪除和添加選項簡單得多。

Answer 2

只需將其刪除並將其存儲在JavaScript中的var中即可。您可以在稍後需要時創建新對象。

否則請嘗試上面提到的disabled屬性。

Answer 3

嘗試detach（）。

s_parent.change(function(){ 
    s_child.load('./fetch_options.php",{'v',s_parent.val()}); 
} 

的「fetch_options.php」腳本會簡單地打印出基於期權標籤： 您可以使用，如果追加（）或insertAfter（）

Answer 4

另外還有的.load方法需要稍後再連接無論你使用的數據源和父值傳入

Answer 5

我剛剛遇到這個，而不是克隆整個選擇反覆我只是取代了需要隱藏的選項，需要隱藏span元素和隱藏跨度（儘管瀏覽器不會直觀地顯示它們，我認爲） - 喲你可能需要改變你的代碼（如果複雜的話）來遍歷複雜邏輯的跨度。

跨度存儲對option的引用，並在需要顯示它們時用它替換它們自己。

此代碼顯然可以重構和美化。

http://fiddle.jshell.net/FAkEK/12/show/

編輯＃2（USE這個代替）：它發生，我認爲不是做這一切克隆/參考/替換廢話，只是包裝選項，跨度，隱藏的跨度，和展出的只是再次選擇更換跨度..

http://fiddle.jshell.net/FAkEK/25/show/

Answer 6

我覺得MEDER提供了有效的答案，這是稍有改變，以反映什麼對我的作品：

$.fn.optVisible = function(show) { 
    if(show) { 
     this.filter("span > option").unwrap(); 
    } else { 
     this.filter(":not(span > option)").wrap("<span>").parent().hide(); 
    } 
    return this; 
} 

測試了（萬歲BrowserStack）：

• 的Windows XP：IE 6.0，火狐3.0，Safari瀏覽器4.0，歌劇10.0，鉻14.0
• Windows 8中：IE 10.0地鐵
• iOS 3.2（iPad），iOS 6.0（iPhone 5）
• Android 1。6（索尼的Xperia X10）

jsfiddle

Answer 7

/** 
* Change visibility of select list option elements 
* @param {boolean} stateVal  show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state 
*/ 
$.fn.toggleOptionVisibility = function (stateVal) { 
    var isBool = typeof stateVal === "boolean"; 
    return this.each(function() { 
     var $this = $(this); 
     if (isBool) { 
      if (stateVal) $this.filter("span > option").unwrap(); 
      else $this.filter(":not(span > option)").wrap("<span>").parent().hide(); 
     } 
     else { 
      $this.filter("span > option").toggleOptionVisibility(true); 
      $this.filter(":not(span > option)").toggleOptionVisibility(false); 
     } 
    }); 
}; 

Answer 8

你也應該在Chrome中工作，但nvm.Here是另一種方式

select = $('#custcol7'); 
select.find('option[value=["'+sizeValue +'"]').remove(); 

和方式，如果你想顯示它再次：

select.append('<option value="'+sizeValue+'"></option>'); 

它適用於每個瀏覽器和我完美很簡單的代碼。問題是，如果你想隱藏的幾個選項更打字..但可以通過將它們放入變量來解決，如果他們不喜歡動態的改變是：如果你必須刪除

var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>'; 

select.append(options); 

這樣/附加在幾個地方你只能輸入選項一次。希望我給了另一個有趣的選擇。最好的祝福。

Answer 9

您可以使用此：

$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'}); 

它適用於除了Safari和Opera的所有瀏覽器的罰款。我正在尋找另一個最佳解決方案:)

Answer 10

您需要將其刪除，然後再次將其添加到Internet Explorer中。

要刪除：

$("#custcol7 option[value=" + sizeValue + "]").remove(); 

補充：

$("#custcol7").append("<option value='sizeValue'>sizeValue</option>"); 

請注意，你需要有sizeValue也是在選項的文本，實際上看到的東西。

Answer 11

使用AuthorProxy提供的解決方案，它適用於IE，但是當我嘗試在Firefox中的下拉列表上做一個.val（）時，我得到了一些沒有任何意義的時髦值。我已經修改了他們的選項，包括瀏覽器特定功能，隱藏/顯示Firefox的作​​品。

$.fn.toggleOptionVisibility = function (stateVal) { 
    var isBool = typeof stateVal === "boolean"; 
    return this.each(function() { 
     var $this = $(this); 
     if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) { 
      if (isBool) { 
       if (stateVal) $this.filter("span > option").unwrap(); 
       else $this.filter(":not(span > option)").wrap("<span>").parent().hide(); 
      } 
      else { 
       $this.filter("span > option").toggleOptionVisibility(true); 
       $this.filter(":not(span > option)").toggleOptionVisibility(false); 
      } 
     } 
     else {    
      if (isBool) { 
       $this.show(); 
      } 
      else { 
       $this.hide(); 
      } 
     } 
    }); 
}; 

Answer 12

您也可以替換select中的html。

HTML：

<input id="Button1" type="button" value="hide option" /> 

<select id="foo"> 
<option >stuff</option> 
<option >stuff2</option> 
</select> 

的Jquery：

$("#Button1").change(function() { 
     $('#foo').html('<option >stuff</option>'); 
    }); 

不正是你想要的，但也許它幫助。對於更小的下拉菜單，它肯定更容易。

Answer 13

要刪除的選項使用：

var opt=$("option").detach(); 

要顯示選項使用：

opt.appendTo("select"); 

Answer 14

我採取的是其他的答案有點不同。

目標不是隱藏選項，而是讓它們禁用（以保持UI一致）。

我的場景：

我有一個形式的多個選擇，並且當用戶的在選擇的一個選擇的選項的選擇的其他應禁用該選項，反之亦然。用戶被限制選擇已經選擇的相同選項。我們通常禁用該選項，但對於不支持它的IE 7。用戶還可以選擇添加新的選擇。

解決方案：

負載：

如果瀏覽器IE7，然後在填充的選擇和禁用其他選擇已經選擇的選項我添加自定義屬性的選項（「data-ie7-disabled」 ）並且還將禁用選項的顏色更改爲'#cccccc'（這是禁用選項的標準顏色）。這使得UI在各種瀏覽器中看起來相同。

在變化：

我保存在一個局部變量（這是保存在焦點）的一個選項。

當用戶試圖改變的選項

1. 用戶選擇未在任何其他下拉選擇一個完整的新選項。然後我遍歷其他選擇並更改顏色，並將自定義屬性添加到其他選擇上的此選定選項。

2. 當用戶選擇一個已經選擇的選項（灰色的選項）。我首先檢查該選項是否具有此自定義屬性。如果它有，那麼>我簡單地將選項恢復爲前一個，並顯示錯誤消息「此選項已被選中或BLAH BLAH」。

3. 當用戶將其現有選項更改爲未在其他任何下拉列表中選中的全新選項時。我再次遍歷所有其他選擇選項，並刪除它的顏色和自定義屬性。

希望這會有所幫助。

Answer 15

您可以通過var $opt=$('select>option').clone()和$('select option[value="'+val+'"').remove()的組合使用。還有另外一個例子：試試這個。 https://jsfiddle.net/sherali/jkw8fxzf/12/

var $secondOption= $('#second-choice>option').clone(); 

$("#first-choice").change(function() { 
    var userSelected = $(this).val(); 

    $('#second-choice').html($secondOption); 
    $('#second-choice option[value="'+userSelected+'"').remove() 
}); 

Answer 16

在IE 11（Edge）中，以下代碼正在工作。

$("#id option[value='1']").remove(); 

和廣告回來，

$('<option>').val('1').text('myText').appendTo('#id');