我在表单底部有一个下拉菜单,其中包含 6 个不同的选项。 我需要根据选择的选项在此菜单下方的 div 上显示不同的内容。
在用户选择其中一个选项之前,不应显示任何其他内容,一旦用户选择其中一个选项,则只有与该特定选项关联的内容才应该可见。
我需要使用 JavaScript 创建此功能,但我对 JavaScript 的了解非常有限,而且我似乎没有在网上找到我需要的东西。
我相信我需要做的是创建 6 个不同的 div(每个选项一个)并切换 一旦选择了各自的标题,就会使它们可见的类。
这是我的下拉菜单:
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
任何帮助将不胜感激。
最佳答案
我添加了您提到的 div
,并为每个 id
分配了一个 id
,这使得 Javascript 更容易一些。
Javascript
var ids=["student", "educator", "parent", "not-school", "publisher"];
var dropDown = document.getElementById("roleSel");
dropDown.onchange = function(){
for(var x = 0; x < ids.length; x++){
document.getElementById(ids[x]).style.display="none";
}
document.getElementById(this.value).style.display = "block";
}
HTML
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select id="roleSel" class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<div id="student" class="hidden">Student div</div>
<div id="educator" class="hidden">Educator div</div>
<div id="parent" class="hidden">Student div</div>
<div id="not-school" class="hidden">Not School div</div>
<div id="publisher" class="hidden">Student div</div>
关于javascript - 如何根据下拉菜单用户选择显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18115916/