关于html：具有display：none的选项未隐藏在IE中

Options with display:none not hidden in IE

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

这是代码的jsfiddle：

1
2
3
4
5
6
7
8
9
10
11

http://jsfiddle.net/7vUdb/

相关讨论

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.

jQuery的：

1
2
3
4
5
6
7
8
9
10
11

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

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

HTML：

1
2
3
4
5
6
7
8
9
10
11
12

<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

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

我在一个"老问题"上还值2美分，但仍然是一个相关问题。

服务器端：

1
2
3
4
5

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

客户端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

使用以下Js隐藏选项标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

相关讨论

IE 10、11 Edge中的相同问题。
选项不会像Firefox，Chrome等那样消失。

(jQuery代码)

无效：

$('option')。hide();
$('option')。attr('style'，'display：none！important');
$('option')。attr('disabled'，'disabled');

但这行得通！

1	$('option').unwrap('div').wrap('');

@Gev的解决方案很好，但是选项仍然显示(即使已禁用)，因此行为在浏览器之间是不一致的。

您可以将option标记修改为其他内容以使其停止显示，但随后会丢失所有属性或HTML5数据标记。

我想出的解决方案是将要禁用的所有选项包装在不同的标签中(在这种情况下，这是一个组合的标签，它可以完成工作并弄清楚正在发生的事情)。

从选项示例以及可选数据标签开始：

1
2
3
4
5

隐藏不需要的选项：

1
2
3
4
5

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

要在整个列表上撤消上述操作，然后隐藏其他选项：

1
2
3

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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);
}
}
}

试试下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

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();
}
}

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