Html 显示选项：none 未隐藏在 IE 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20373558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Options with display:none not hidden in IE
提问by MJQ
I have multiple options in a select. I have sorted the options and disabled and hidden the duplicate options with jquery. The code works well in chrome and firefox but in IE and safari, the options with display:none are still showing up.
我在一个选择中有多个选项。我已经对选项进行了排序，并使用 jquery 禁用和隐藏了重复的选项。该代码在 chrome 和 firefox 中运行良好，但在 IE 和 safari 中，带有 display:none 的选项仍然显示。
Here is the jsfiddle of the code:
这是代码的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>
回答by freefaller
IE doesn't support style="display:none;"on <option>tags.
IE不支持style="display:none;"的<option>标签。
Your only option is to remove them - either as part of the creation of the HTML, or via client-side script.
您唯一的选择是删除它们 - 作为创建 HTML 的一部分，或通过客户端脚本。
回答by Gev
If somebody still faces this issue, here is my solution, it may be helpfull:
如果有人仍然面临这个问题，这是我的解决方案，它可能会有所帮助：
$('select.some-list option[id=someId]').attr('disabled', 'disabled').hide();
This hides the option in all browsers and disables if can't hide :). To bring back the option do not forget to enable it:
这会在所有浏览器中隐藏该选项，如果无法隐藏则禁用:)。要恢复该选项，请不要忘记启用它：
$('select.some-list option[id=someId]').removeAttr('disabled').show();
回答by Zhangjiang Huang
You can use detach()and remove()to do this.
您可以使用detach()和remove()来做到这一点。
回答by Nick Cordova
Expanding on Zhangjiang Huang's answer:Pretty much you cache all the options, detach them from the drop-down, then you reattach the ones you want.
扩展 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:
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>
回答by Rigel Networks
Use following Js to hide option tag
使用以下 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();
Ref : jsfiddle.net/p8Gmm/7
参考：jsfiddle.net/p8Gmm/7
Or
或者
Ref :
参考：
回答by Stephen
my 2 cents worth on an "old question", yet still a relevant issue.
我在一个“老问题”上价值 2 美分，但仍然是一个相关问题。
Server side:
服务器端：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{ //load subDropDownList all possible values [with an attribute for filtering] }
}
Client-side:
客户端：
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));
});
});
})
The idea here is on client side I load all values into an array, then on change event of the main select I add only the required options. Hope someone finds this helpful.
这里的想法是在客户端我将所有值加载到一个数组中，然后在主选择的更改事件中我只添加所需的选项。希望有人觉得这有帮助。
回答by user85230
Try this following code
试试这个下面的代码
<!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>
回答by Namrata S Jain
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);
}
}
}
回答by SharpC
The solution by @Gevis good, but the options still appear (even though disabled), so the behaviour is inconsistent across browsers.
@Gev的解决方案很好，但选项仍然出现（即使已禁用），因此跨浏览器的行为不一致。
You could amend the optiontag to something elsewhich stops it appearing, but then you lose any attributes or HTML5 data tags.
您可以将option标记修改为其他内容以阻止它出现，但随后您将丢失任何属性或 HTML5 数据标记。
The solution I came up with was to wrap any options you want disabled in a different tag (in this case a made up one, which does the job and makes it clear what's happening).
我想出的解决方案是将您想要禁用的任何选项包装在不同的标签中（在这种情况下是一个虚构的标签，它可以完成工作并清楚地说明发生了什么）。
Starting with example of options also with optional data tags:
从选项示例开始，也有可选的数据标签：
<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>
To hide the options you don't want:
要隐藏您不想要的选项：
$("#myselections > option").each(function () {
if(some check) {
$(this).wrap("<optionhidden></optionhidden>");
}
});
To undo the above on the whole list before hiding different options:
要在隐藏不同选项之前撤消整个列表中的上述操作：
$("#myselections > optionhidden").each(function () {
$(this).replaceWith($(this).html());
});
回答by mobdd
Same problem here in IE 10, 11, Edge.. Options will not disapear like in Firefox, Chrome, ..
同样的问题在 IE 10、11、Edge 中......选项不会像在 Firefox、Chrome 中那样消失......
(jQuery-Code)
（jQuery 代码）
Works not:
不工作：
- $('option').hide();
- $('option').attr('style', 'display: none !important');
- $('option').attr('disabled', 'disabled');
- $('option').hide();
- $('option').attr('style', 'display: none !important');
- $('option').attr('disabled', 'disabled');
But that works!
但这有效！
$('option').unwrap('div').wrap('<div style="display: none;" />');
