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

我需要创建一个使用标签的形式，将有例如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>

选择1
选择2
选择3




文本1
文本2

看看这个

它链接到基于option元素的onclick事件

---

在select元素上使用onchange事件。

如果您可以更改div以添加一些类，那么可以更简单地完成任务

将

options

添加到需要检查select值的所有div中，并添加类似

option1

的特殊类，以指示在选择option1时应显示它

当值更改时，获取所有正在观看的div并使用它们的类来决定是否显示

如果这样做，就可以确保不再需要向javascript添加其他逻辑，每次增加

选项

/

div

时，您只需指定哪些div将监视哪些选项，脚本将完成其余工作

//使用window.onload确保目标select存在。
window.onload=函数（）{
//收听select的更改事件。
var select=document.getElementsByName（'selector'）[0]；
select.addEventListener（'change'，function（））{
//获取select的值。
var值=此值；
//获取将受值更改影响的所有相关div。
var divs=document.getElementsByClassName（'options'）；
变量i，len=divs.length，show；
对于（i=0；i

选择1
选择2
选择3




文本1
文本2
问题在于选项单击处理程序，而不是使用更改处理程序


功能设置显示（el）{
var值=el值；
document.getElementById（'id_1'）。style.display=value=='option3'？'block'：'none'；
document.getElementById（'id_2'）。style.display=value=='option1'| | value=='option2'？'block'：'none'；
}

选择1
选择2
选择3




文本1
Text2
JavaScript onclick事件不适用于
标记。您需要的是为
标记绑定onchange事件。
这应该有效：


选择1
选择2
选择3
文本1
文本2
函数jsFunction（）{
var isOption3=$（“选择选项：已选定”）.val（）==“选项3”；
document.getElementById（'id_1'）。style.display=isOption3？'none'：'block'；
document.getElementById（'id_2'）。style.display=isOption3？'block'：'none'；
}
尝试使用带有select标记的
onchange
，也可以尝试
this。选择索引
而不是
this。选中
：


var byId=函数（id）{
返回文档.getElementById（id）；
};
变量切换=功能（el，标志）{
el.style.display=标志“块”：“无”；
};
变量更改=功能（dd）{
var i=dd.selectedIndex；
切换（byId（'id_1'），2==i）；//选项3
切换（byId（'id_2'），（1==i | | 0==i））；//选项1或2
};
已更改（byId（'dd'））；//页面加载时设置

选择1
选择2
选择3


文本1
Text2
我尝试使用您的代码，但它无法正常工作：无论选择哪个选项，div1都只可见…控制台是否弹出任何错误？当我修改html部分和js部分时，当您选择选项3时文本是否不显示Text2？如果您说我编辑的版本，那是因为我添加了
窗口。onload
以确保无论您将脚本放在
选择
之前还是之后，它都可以引用它。
<select name="selector" onChange="jsFunction()">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
</select>
<div id="id_1" style="display: block;"> <span>Text1</span></div>
<div id="id_2" style="display: none;"> <span>Text2</span></div>
<script>
    function jsFunction() {
        var isOption3 = $("select option:selected").val() == 'option3';
        document.getElementById('id_1').style.display = isOption3 ? 'none' : 'block';
        document.getElementById('id_2').style.display = isOption3 ? 'block' : 'none';
    }
</script>