使用 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 上都可以）。

法郎 5.0; 鉻 12； 即 8; 歌劇 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屬性...嘗試在周圍的select標記上使用onchange 。

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

如果您從 select 框中刪除 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();
    }
}