jQuery 隐藏选择元素中的选项，在 IE 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8169636/
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
Hide options in select element, not working in IE?
提问by qwerty
Possible Duplicate:
Hide select option in IE using jQuery
可能的重复：
使用 jQuery 在 IE 中隐藏选择选项
So as you can see below, i have two select elements. The first one has two values, 1.4 and 1.7. Depending on which option is selected i want to disable certain options in the second select element. It works perfectly fine in chrome, but IE is being a bitch (as usual!).
所以正如你在下面看到的，我有两个选择元素。第一个有两个值，1.4 和 1.7。根据选择的选项，我想禁用第二个选择元素中的某些选项。它在 chrome 中运行良好，但 IE 是个婊子（像往常一样！）。
Any ideas what's wrong?
任何想法有什么问题？
<p>
<label style="width: 155px; display: inline-block;">Height</label>
<select name="height">
<option value="1.4">1.4</option>
<option value="1.7">1.7</option>
</select>
</p>
<p>
<label style="width: 155px; display: inline-block;">Amount</label>
<select name="slanor">
<option class="four" value="2">2</option>
<option class="four seven" value="3">3</option>
<option class="seven" value="4">4</option>
</select>
</p>
<script>
$(document).ready(function() {
check();
$('select[name=height]').change(function() {
check();
});
function check() {
var slanor = $('select[name=slanor]');
var currHeight = $('select[name=height]').val();
if(currHeight == '1.4') {
slanor.find('option').hide();
slanor.find('.four').show();
} else {
slanor.find('option').hide();
slanor.find('.seven').show();
}
}
});
</script>
回答by dxh
The notion of hidden optionsin a selectdoesn't exist in IE. You would have to manually remove and re-add the entries, which may be somewhat of an inconvenience.
IE 中不存在隐藏options在 aselect中的概念。您必须手动删除并重新添加条目，这可能会带来一些不便。
Another solution would be to also disable the elements:
另一种解决方案是同时禁用这些元素：
slanor.find(option).hide().prop('disabled', true);
This will hide the option in all browsers that support it, but disable it in IE, which means it'll still be visible, but visually distinguished from the other options, and un-selectable.
这将在支持它的所有浏览器中隐藏该选项，但在 IE 中禁用它，这意味着它仍然可见，但在视觉上与其他选项不同，并且不可选择。
However: if your problem is exactly as you have described, and there are only two options that your script will vary on, the simplest solution might be to hideand showtwo different dropdowns entirely, depending on which option is selected.
但是：如果你的问题是完全按照你的描述，也有只有两个选择，你的脚本将改变时，最简单的解决办法可能是hide和show两个不同的下拉列表完全取决于哪个选项被选中。
回答by Jan Aagaard
Calling .hide() in jQuery adds display:none to the element. I doubt that it is standard HTML that you can hide options in this way.
在 jQuery 中调用 .hide() 会向元素添加 display:none 。我怀疑您可以通过这种方式隐藏选项是标准 HTML。
You could use this code instead:
您可以改用此代码：
slanor.empty();
if (currHeight == '1.4') {
slanor.append($('<option'>).val('2').text('2'));
slanor.append($('<option'>).val('3').text('3'));
}
else {
slanor.append($('<option'>).val('3').text('3'));
slanor.append($('<option'>).val('4').text('4'));
}
回答by kaykayman
The option tag doesn't support the css display attribute. Which is what show()/hide() does. Your best bet is to either remove and recreate the options as they are needed. Or I guess you could append them to another hidden object and pull them back when you need them fully formed.
option 标签不支持 css display 属性。这就是 show()/hide() 所做的。最好的办法是根据需要删除并重新创建选项。或者我想你可以将它们附加到另一个隐藏的对象上，并在需要它们完全成型时将它们拉回来。
So you would have something like
所以你会有类似的东西
$("option").appendTo($("#myhiddenselect"));
$(".four").appendTo($("#myvisibleselect"));
