javascript - 根据表单中选择的选项显示或隐藏不同的 div

Question

我需要使用标签创建一个表单，其中包含例如 3 个选项。当选择选项 1 或 2 时，div 1 应可见，如果选择选项 3，则 div2 应可见。我的脚本可以在 IE 和 Firefox 中运行，但不能在 Chrome 和 Safari 中运行。

这是我的脚本:

<select name="selector">
    <option value="option1" onclick="document.getElementById('id_2').style.display = this.checked ? 'block' : 'none'; document.getElementById('id_1').style.display = this.checked ? 'none' : 'block';"> Option1
    </option>
    <option value="option2" onclick="document.getElementById('id_2').style.display = this.checked ? 'block' : 'none'; document.getElementById('id_1').style.display = this.checked ? 'none' : 'block';"> Option2
    </option>
    <option value="option3" onclick="document.getElementById('id_1').style.display = this.checked ? 'block' : 'none'; document.getElementById('id_2').style.display = this.checked ? 'none' : 'block';"> Option3
    </option>
</select>
<br>
<br>    
<div id="id_1" style="display: block">
    <span>Text1</span>
</div>  
<div id="id_2" style="display: none">
    <span>Text2</span>
</div>

Answer 1

问题是选项点击处理程序，而是使用更改处理程序

function setDisplay(el) {
    var value = el.value;
    document.getElementById('id_1').style.display = value == 'option3' ? 'block' : 'none';
    document.getElementById('id_2').style.display = value == 'option1' || value == 'option2' ? 'block' : 'none';
}

<select name="selector" onchange="setDisplay(this)">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
</select>
<br/>
<br/>
<div id="id_1" style="display: block"><span>Text1</span></div>
<div id="id_2" style="display: none"> <span>Text2</span></div>