Question

我这里有3个选项

<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>`

我的javascript代码没有完成工作，请任何人都可以使它成为可能。

Answer 1

它无效，因为元素的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是adtype，banner，textr和log，而您正在检查id禁令和textadvert。

Answer 2

我已经为你制作了这个编码器，对于你得到的每个div都不需要新的if（如果你想增加更多的话很有用）

HTML差异：“display-ban”ID而非“禁止”，因为您在“日志”ID上存在冲突，而且这个ID可能更具体。

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

JS主要区别：

var subjectDiv=document.getElementById("display-"+selectedValue)
subjectDiv.style.display="block";

我还检查了之前显示的项目，并将其隐藏起来。

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

希望这会有所帮助。您可以找到codepen here。

根据javascript中选择的选项显示div

2 个答案: