显示选项：none 不隐藏在 IE 中

Question

我在一个选择中有多个选项。我已经对选项进行了排序，并使用 jquery 禁用并隐藏了重复的选项。该代码在 chrome 和 firefox 中运行良好，但在 IE 和 safari 中，带有 display:none 的选项仍然显示。

这是代码的jsfiddle：

<select>
  <option value="5797">34</option>
  <option value="5809">37</option>
  ... 
  <option value="5653">71</option>
  <option disabled="" selected="selected" value="53">Eye</option>
  <option disabled="disabled" style="display: none;" value="5441">52</option>
  <option disabled="disabled" style="display: none;" value="5443">52</option>
  ...
  <option disabled="disabled" style="display: none;" value="5431">51</option>
</select>

http://jsfiddle.net/7vUdb/

Answer 1

IE 不支持 style="display:none;" 上的 <option> 标签。

您唯一的选择是删除它们 - 作为 HTML 创建的一部分，或通过客户端脚本。

Answer 2

如果有人仍然面临这个问题，这是我的解决方案，它可能会有所帮助：

$('select.some-list option[id=someId]').attr('disabled', 'disabled').hide();

这会在所有浏览器中隐藏该选项，如果无法隐藏则禁用 :)。 要恢复该选项，请不要忘记启用它：

$('select.some-list option[id=someId]').removeAttr('disabled').show();

Answer 3

您可以使用detach() 和remove() 来执行此操作。

Answer 4

扩展张江黄的回答：您几乎可以缓存所有选项，将它们从下拉列表中分离出来，然后重新附加您想要的选项。

JQuery：

(function(){
   // Cache List
   var options = $("select option");

   // Clear list
   options.detach();
   // Rebuild list
   options.not(".disabled").appendTo("select");
   // Set Default
   $("select").val("");
})();

HTML：

<select>
   <option value="">---Select One---</option>
   <option value="5797">34</option>
   <option value="5809">37</option>
    ... 
   <option value="5653">71</option>
   <option class="disabled" value="53">Eye</option>
   <option class="disabled"value="5441">52</option>
   <option class="disabled" value="5443">52</option>
   ...
   <option class="disabled" value="5431">51</option>
</select>

jsfiddle

Answer 5

使用下面的Js隐藏选项标签

<select id="selectlist">
      <option value="5797">34</option>
      <option value="5809">37</option>
       <option value="5653">71</option>
      <option  value="53">Eye</option>
      <option  value="5441">52</option>
      <option  value="5443">52</option>
      <option value="5431">51</option>
    </select>


$('#selectlist option[value=53]').hide();
$('#selectlist option[value=52]').hide();
$('#selectlist option[value=5443]').hide();

参考：jsfiddle.net/p8Gmm/7

或者

参考：

http://jsfiddle.net/chiragvidani/vhKdw/

Answer 6

我在一个“老问题”上的价值 2 美分，但仍然是一个相关问题。

服务器端：

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   { //load subDropDownList all possible values [with an attribute for filtering] }
}

客户端：

var optionList = null;
$(function(){
  if (!optionList)
  {
     optionList = new Array();
     $("[id$='subDropDownList'] option").each(function () {
         optionList.push({value: $(this).val(), text: $(this).text(), filterID: $(this).data("filterid") }); 
      });
  } 

  $("[id$='mainDropDownList']").on("change", function (e) {
     var filterID = $(this).val();
     $("[id$='subDropDownList']").html("");

     $.each(optionList, function () {
        if (this.filterID == filterID)
          $("[id$='subDropDownList']").append($("<option></option>").val(this.value).html(this.text).data("filterid", this.filterID));
        });


  });

})

这里的想法是在客户端我将所有值加载到一个数组中，然后在主选择的更改事件中我只添加所需的选项。希望有人觉得这很有帮助。

Answer 7

solution by @Gev 很好，但选项仍然出现（即使已禁用），因此跨浏览器的行为不一致。

你可以amend the option tag to something else 阻止它出现，但是你会丢失任何属性或 HTML5 数据标签。

我想出的解决方案是将您想要禁用的任何选项包装在不同的标签中（在这种情况下是一个组成的标签，它可以完成工作并清楚地说明正在发生的事情）。

从带有可选数据标签的选项示例开始：

<select id="myselections">
  <option data-something="a" value="5797">34</option>
  <option data-something="f" value="5809">37</option>
  <option data-something="j" value="5653">71</option>
</select>

隐藏你不想要的选项：

$("#myselections > option").each(function () {
    if(some check) {
        $(this).wrap("<optionhidden></optionhidden>");
    }
});

在隐藏不同选项之前在整个列表中撤消上述操作：

$("#myselections > optionhidden").each(function () {
    $(this).replaceWith($(this).html());
});

Answer 8

在 IE 10、11、Edge 中也存在同样的问题。 选项不会像 Firefox、Chrome、..那样消失。

(jQuery-代码)

无效：

• $('option').hide();
• $('option').attr('style', 'display: none !important');
• $('option').attr('disabled', 'disabled');

但这行得通！

$('option').unwrap('div').wrap('<div style="display: none;" />');

Answer 9

试试下面的代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var detachedSecondElem,detachedFirstElem="";
var firstDetachedAt, secondDetachedAt;
function changedFirst(){
 var val1=$('#slct').val();
 if(detachedSecondElem!="")
  $( detachedSecondElem ).insertAfter( $("#slct1 option").eq((secondDetachedAt-1)) );

 if(val1!=""){
   secondDetachedAt = $('#slct1 option[value="'+val1+'"]').prevAll().length;
   detachedSecondElem = $('#slct1 option[value="'+val1+'"]').detach();
 }
}
function changedSecond(){
 var val2=$('#slct1').val();
 if(detachedFirstElem!="")
  $( detachedFirstElem).insertAfter( $("#slct option").eq((firstDetachedAt-1)) );

 if(val2!=""){
   firstDetachedAt= $('#slct option[value="'+val2+'"]').prevAll().length;
   detachedFirstElem= $('#slct option[value="'+val2+'"]').detach();
 }
}
</script>
</head>
<body>
<select id="slct" onchange="changedFirst();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<select id="slct1" onchange="changedSecond();"> 
 <option value="">Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<input type="button" value="click me" onclick="disableOption();"/>
<input type="button" value="click me" onclick="attachElem();"/>
</body>
</html>

Answer 10

sort by disabled options. 

$("#addselect option").each(function (i, val) {
                if ($(this)[i].disabled) {
                    moveDown("selectId");
                }
                else {
                    moveUp("selectId");
                }
 }

   function moveUp(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = 1; i < selectOptions.length; i++) {
                var opt = selectOptions[i];
                if (!opt.disabled) {
                    selectList.removeChild(opt);
                    selectList.insertBefore(opt, selectOptions[i - 1]);
                }
            }
        }

        function moveDown(selectId) {
            var selectList = document.getElementById(selectId);
            var selectOptions = selectList.getElementsByTagName('option');
            for (var i = selectOptions.length - 2; i >= 0; i--) {
                var opt = selectOptions[i];
                if (opt.disabled) {
                    var nextOpt = selectOptions[i + 1];
                    opt = selectList.removeChild(opt);
                    nextOpt = selectList.replaceChild(opt, nextOpt);
                    selectList.insertBefore(nextOpt, opt);
                }
            }
        }