使用javascript在html中基于下拉选择显示和隐藏div元素

我有一个问题，使用javascript在使用下拉菜单时显示隐藏div。代码适用于链接和按钮，但我想知道是否有办法重写它，以便它可以使用选择选项。比如，如果我从下拉列表中选择“Show”，它将显示包含“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>

函数showMe（id）{
var e=document.getElementById（id）；
如果（e.style.display==“块”）{
e、 style.display=“无”；
}否则{
e、 style.display=“block”；
}
}

index.html包含：

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

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

隐藏
显示
你好，世界！

您可以更改代码

函数showMe（e）{
var strdisplay=e.options[e.selectedIndex].value；
var e=document.getElementById（“idShowMe”）；
if（strdisplay==“隐藏”）{
e、 style.display=“无”；
}否则{
e、 style.display=“block”；
}
}

隐藏
显示
你好，世界！

隐藏
显示
你好，世界！
函数showMe（选择选项）{
if（selectedOption.value==“Hide”）{
document.getElementById（'idShowMe'）.style.display='none'；
}否则{
document.getElementById（'idShowMe'）.style.display='block'；
}
}

这可以通过onchange事件完成，然后选中所选选项。

Javascript代码：

var current;
function showMe(element) {
  if(current!==undefined){
    document.getElementById(current).setAttribute('style','display:none');
  }
  var fetchMe = element.options[element.selectedIndex].getAttribute('data-show');
  if(fetchMe!==null){
    document.getElementById(fetchMe).setAttribute('style','display:block'); 
    current=fetchMe;
  }
}

并对HTML代码进行最小更改：

<select onchange="showMe(this)">
    <option>Hide</option>
    <option data-show="idShowMe">Show</option>
</select>

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

隐藏
显示
你好，世界！

使用此解决方案，用户可以自由地将具有相应id的任何层连接到选项。只需插入数据显示值并创建一个id为的div：

同样

<select id="mySelect" onchange="showMe('idShowMe')">
    <option>Hide</option>
    <option>Show</option>
</select>

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

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

隐藏
显示
你好，世界！
函数showMe（id）{
var e=document.getElementById（id）；
如果（e.style.display==“块”）{
e、 style.display=“无”；
}否则{
e、 style.display=“block”；
}
}

onselect

未在

选项

元素上实现，您需要将

onchange

附加到

select

元素。类似问题。额外问题-我是否可以以任何方式修改代码，以便使用diff选择来显示/隐藏diff div？就像选择1使1 div可见，选择另一个使第一个变为可见？这正是我所需要的。谢谢

<select id="mySelect" onchange="showMe('idShowMe')">
    <option>Hide</option>
    <option>Show</option>
</select>

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

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