使用javascript根据html中的下拉选择显示和隐藏div元素

Question

我在使用下拉菜单时使用javascript显示隐藏div有一个问题。代码适用于链接和按钮，但即时消息询问是否有任何方法可以重写它，以便可以使用SELECT选项。就像我从下拉列表中选择“显示”一样，它将向我显示包含“ Hello world！”的div。

我目前的Javascript：

<script>
function showMe(id) {
    var e = document.getElementById(id);
    if(e.style.display == "block") {
        e.style.display = "none";
    } else {
        e.style.display = "block";
    }
}
</script>

并且index.html包含：

<select>
    <option>Hide</option>
    <option onselect="showMe('idShowMe')">Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>

Answer 1

您可以更改代码

function showMe(e) {
    var strdisplay = e.options[e.selectedIndex].value;
    var e = document.getElementById("idShowMe");
    if(strdisplay == "Hide") {
        e.style.display = "none";
    } else {
        e.style.display = "block";
    }
}

<select onchange="showMe(this);">
    <option>Hide</option>
    <option>Show</option>
</select>

<div id="idShowMe" style="display: none">
    <b>Hello world!</b>
</div>