Javascript隐藏在IE中不起作用的选择框元素

internet explorer - Javascript to hide select box elements not working in IE

本文关键字：选择 元素 不起作用 隐藏 IE Javascript      更新时间：2023-09-26

嘿，我不确定我这样做是否正确。我有两个不同的选择框。需要发生的是，当选择框1中的某个项目时，框2中的某些项目将被隐藏。我有什么工作很好在FF，但不是在IE....的想法?

<div>  
    <label class="form_label">Apparel</label>  
    <select id="Choices" size="1" style="clear: right;" onchange"changeThis();">  
        <option value="select">Pick Your Product</option>  
        <option value="1">choice 1</option>  
        <option value="2">choice 2/option>  
        <option value="3">choice 3</option>  
    </select>
</div>
<div>
    <label class="form_label">Size</label>
    <select id="Sizes" size="1" style="clear: right;">
        <option value="select">Choose Your Size</option>
        <option value="SC">Small Child</option>
        <option value="IC">Intermediate Child</option>
        <option value="MC">Medium Child</option>
    </select>
</div>

…

函数改变了(选择)

{
    var item = document.getElementById("Choices");
    var size = document.getElementById("Sizes");
    var selitem = item.options[item.selectedIndex].value;
    if(selitem == '2546')
    {
        for(i=0; i<2; i++)
        {
            size[i].style.display = 'none';
            //alert(size[i]);
        }
    }

试着用这个代替:

http://www.w3schools.com/CSS/pr_class_visibility.asp

结果为:

size[i].style.visibility='hidden';

编辑

哦，欢迎来到StackOverflow!

几天前我也遇到了同样的问题。IE不允许使用visible:hidden或display:none作为选项元素。

您可以解决将select1的选项存储在变量中的问题。这个变量将有所有可能的值，所以当select1的值被改变时，你可以删除select2的所有值，然后从变量中获得你需要的选项，放入select2。

总结:

  1. 将所有可能的值存储在变量
    2. 中
  2. 当select1被更改时，删除select2的所有选项
  3. 过滤你需要的选项(从step1的变量中获取这些值)，然后放入select2

您不能显示:none remove将完全删除它，如果您希望用户不选择它使用disabled。你可以这样写

function changeThing()
{
var item = document.getElementById("Choices");
var size = document.getElementById("Sizes");
var selitem = item.options[item.selectedIndex].value;
if(selitem == '3')
{
    for(i=1; i<2; i++) // filter logic here
    {
        size[i].disabled = true; //false - to reset
        //alert(size[i]);
    }
}
size.selectedIndex = 0; // reset the selection so a disabled item may not be selected. }

这取决于您如何触发调用changeThing()函数的事件。不确定IE9，但IE8及其后版本的onChange事件有问题。它基本上避免了IE。你将不得不使用onClick代替。

如果你使用jQuery来触发事件，onchange事件应该在所有浏览器(甚至IE)中都能正常工作。不知道其他Javascript库是怎么做的

您需要完全删除此选项才能使其在IE中工作。

size.remove(i);

所以你需要将你的选项存储在数组中，并在需要时加载它。

相关文章：