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

Question

我在隐藏元素时遇到问题。 我已经读过这个主题 Javascript 可以在 Firefox 上运行，但不能在 Chrome 和 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； IE 8； Opera 11.50

现在适用于：

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

Answer 1

onclick 对于 option 元素无效。

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

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

Answer 2

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

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

---

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

Answer 3

我真的鼓励您为此使用 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>

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