基于在javascript中选择的选项显示div

我有三个选择

<select id="adtype" name="adtype" onchange="validate();">
<option id="banner" value="ban">Banner Advertisement</option>
<option id="textr" value="txt">Text Advertisement</option>
<option id="log" value="log">Login Advertisement</option>
</select>

横幅广告
文字广告
登录广告

选择每个选项时，我需要显示3个分区，每个选项1个分区 假设选择横幅时，显示横幅分割 但是所有的分区必须在页面中处于相同的位置。 我的javascript代码是：

<script>
function validate()
{
    var ddl = document.getElementById("adtype");
    var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "selectoption")
    {
        alert("Please select an Advert type");
    }
    if(selectedValue == "txt")
    {
        document.getElementById("ban").style.display="none";
        document.getElementById("textadvert").style.display="block";
    }
}
</script>`

函数验证（）
{
var ddl=document.getElementById（“adtype”）；
var selectedValue=ddl.options[ddl.selectedIndex].value；
如果（selectedValue==“selectoption”）
{
警告（“请选择广告类型”）；
}
如果（selectedValue==“txt”）
{
document.getElementById（“ban”）.style.display=“无”；
document.getElementById（“textadvert”）.style.display=“block”；
}
}
`

---

我的javascript代码不起作用，请任何人都可以使其成为可能。

它不起作用，因为元素的

id

不匹配

function validate() {
  var ddl = document.getElementById("adtype");
  var selectedValue = ddl.options[ddl.selectedIndex].value;

  if (selectedValue == "selectoption") {
    alert("Please select an Advert type");
  }

  if(selectedValue == "txt") {  
    document.getElementById("banner").style.display="none";
    document.getElementById("textr").style.display="block";
  }
}

---

您的

id

s是adtype、banner、textr和log，而您正在对照ban和textadvert的

id

进行检查。

我为您制作了此代码笔，它不需要为您获得的每个div都添加新的if（如果您想添加更多，则非常有用）

HTML的区别：“display ban”ID而不仅仅是“ban”，因为“log”ID上有冲突，这个可能更具体

<div class="hidden" id="display-ban">BAN DIV</div>

我还检查了以前显示的项目，并将其隐藏

if(prev){
 prev.style.display="none";
}

---

希望这有帮助。您可以找到代码笔。

问题是？此外，请缩进您的代码。否，我正在检查值。请参阅var selectedValuei我要隐藏横幅分割，并在代码

文档中的这一行显示文本advert div代替它。getElementById（“ban”）.style.display=“none”

。您正在搜索id

ban

，该id应为

banner

，因为您的选项具有id

banner

。是的，我正在搜索id，但检查选项的值，请解决此问题

if(prev){
 prev.style.display="none";
}