使用 Javascript 隐藏元素。不适用于 IE 和 Chrome答案

【问题标题】：Hide element with Javascript. Doesn't work with IE and Chrome使用 Javascript 隐藏元素。不适用于 IE 和 Chrome
【发布时间】：2011-10-09 08:53:44
【问题描述】：

我有隐藏元素的问题。我已经读过这个话题 Javascript working on Firefox but not in Chrome and IE6 但没有从那里得到帮助。 Javascript 代码，应该隐藏/显示文本框和单选按钮：

function hide1(a)
{
var text1=document.getElementById("text1");
text1.style.visibility = 'visible';
text1.value = a;

document.getElementById("radio1").style.visibility = 'hidden';
document.getElementById("radio2").style.visibility = 'hidden';
document.getElementById("rlabel").style.visibility = 'hidden';
}

function show1()
{
document.getElementById("text1").style.visibility = 'hidden';
document.getElementById("radio1").style.visibility = 'visible';
document.getElementById("radio2").style.visibility = 'visible';
document.getElementById("rlabel").style.visibility = 'visible';
}

还有 HTML：

<select id='listb2'>
  <option onclick='hide1("$age");' value='1'>Age</option>
  <option onclick='show1();' value='2'>Sex</option>
</select>

现在使用 Firefox 和 Opera，当我选择其中一个选项时，它会将单选按钮和文本框更改为可见/隐藏。但是对于 Chrome 和 IE，他们不会。我也试过“... .style.display = 'none';”即使这次也没有发生任何事情（在 IE 和 Chrome、FF 和 Opera 上都可以）。

FF 5.0;铬 12；即 8;歌剧 11.50

现在适用于：

<select onchange='hideshow(this.value);' id='listb2'>
  <option value='1'>Age</option>
  <option value='2'>Sex</option>
</select>

【问题讨论】：

<option onclick> 会触发吗？尝试在hide1 中提醒一些东西。
不，它没有。有什么我可以做的吗？

标签： javascript internet-explorer firefox google-chrome show-hide

【解决方案1】：

我真的鼓励您为此使用 jQuery。 jQuery 保证这将适用于每个浏览器。在查询它很容易

<script>
    $().ready(function () {
        $("#listb2").change(function () {
            if ($("#listb2").val() == "1")
                $("#radio1, #radio2, #rlabel").show();
            else
                $("#text1, #radio1, #radio2, #rlabel").hide();
        });
    });
</script>

<select id='listb2'>
  <option value='1'>Age</option>
  <option value='2'>Sex</option>
</select>

【讨论】：

【解决方案2】：

不要将“可见性”设置为“隐藏”，而是尝试将“显示”设置为“无”。

document.getElementById('header').style.display = 'none';

编辑：不太确定您是否可以在这些浏览器中设置option 元素上的onclick 属性...尝试在周围的select 标记上使用onchange。

【讨论】：

实际上我已经在使用它了，我发布了旧代码，因为我确信它可以工作。现在我确定display 也可以与 FF 和 Opera 一起使用

【解决方案3】：

onclick 对 option 元素无效。

改为处理select 的onchange 事件，使用下面的代码获取选定的值，然后进行条件处理。

var element = document.getElementById("listb2");
var selectedValue = element.options[element.selectedIndex].value;

【讨论】：

select 不起作用，onchange 我也遇到了一些问题
@Timo: onchange 在 HTML4 规范中为 select: w3.org/TR/html4/interact/forms.html#h-17.6 出了什么问题？
是的，现在我明白了，不知道我在想什么：D。但是上次onchange那里仍然存在问题。我再检查一次。
谢谢大家，onchange运行良好，也许我上次犯了一些错误。

【解决方案4】：

如果您像这样从选择框中删除 onclick 事件：

<select id='listb2'>
  <option value='1'>Age</option>
  <option value='2'>Sex</option>
</select>

然后你可以使用javascript绑定一个onChange事件：

var selectBox = document.getElementById("listb2");
selectBox.onchange = function(e){
    if(selectBox.value == 1) {
        // Do what you want for Age
        hide1();
    } else if(selectBox.value == 2) {
        // Do what you want for Sex
        show1();
    }
}

【讨论】：