Question

我在select中有多个选项。我已经对选项进行了排序并禁用了并使用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

扩展Zhangjiang Huang的答案：你可以缓存所有选项，将它们从下拉列表中分离出来，然后重新附加你想要的选项。

<强> 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

使用以下J来隐藏选项标记

<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美分问题＆＃34;，但仍然是一个相关的问题。

服务器端：

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

尝试以下代码

<!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 8

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 9

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;" />');

显示的选项：无在IE中隐藏

9 个答案: