如何显示内容取决于下拉菜单用户选择 [英] How to display content depending on dropdown menue user selection

问题描述

我在表格底部有一个下拉菜单，有6个不同的选项。
我需要在此菜单下面的div上显示不同的内容，具体取决于选择了哪个选项。

在用户选择其中一个选项之前，不应显示其他内容，一旦用户选择其中一个选项，则只有与该特定选项相关的内容应该可见。

我需要使用JavaScript创建此功能，但我对JavaScript的了解非常有限，我似乎没有在网上找到我需要的。

我相信我需要做的是创建6个不同的div（每个选项一个），并切换
a类，使其在选择相应的标题后可见。

这是我有的下拉菜单：

 < div class = > 
< label for =roleBoxdata-label =I_AM> {％trans％} main.I_AM_TITLE {％endtrans％}< / label> 
< div class =f-wrapper> 
< select class =cbxtabindex =50name =role> 
< option value =student>学生< / option> 
< option value =educator>教育工作者< / option> 
< option value =parent>父级注册我的孩子< / option> 
< option value =not-school>不在学校，但仍在学习< / option> 
< option value =publisher> A发布商或感兴趣的Kno合作伙伴< / option> 
< / select> 
< / div> 
< / div> 
  

任何帮助将非常感激。

解决方案

我添加了你提到的 div

$ p $ <$ p $ <$>

$ b

  var ids = [student，educator，parent，not-school，publisher]; 
 var dropDown = document.getElementById（roleSel）; 
 
 dropDown.onchange = function（）{
 for（var x = 0; x  document.getElementById（ids [x]） .style.display =none; 
} 
 document.getElementById（this.value）.style.display =block; 
} 
  

HTML

 < div class =field> 
< label for =roleBoxdata-label =I_AM> {％trans％} main.I_AM_TITLE {％endtrans％}< / label> 
< div class =f-wrapper> 
< select id =roleSelclass =cbxtabindex =50name =role> 
< option value =student>学生< / option> 
< option value =educator>教育工作者< / option> 
< option value =parent>父级注册我的孩子< / option> 
< option value =not-school>不在学校，但仍在学习< / option> 
< option value =publisher> A发布商或感兴趣的Kno合作伙伴< / option> 
< / select> 
< / div> 
< / div> 
< div id =studentclass =hidden>学生div< / div> 
< div id =educatorclass =hidden>教育者div< / div> 
< div id =parentclass =hidden>学生div< / div> 
< div id =not-schoolclass =hidden>不是学校div< / div> 
< div id =publisherclass =hidden>学生div< / div> 
  

工作示例 http://jsfiddle.net/qbzmz/

I have a dropdown menu at the bottom of a form with 6 different options. I need to display different content on a div below this menu depending on which option is selected.

No additional content should be visible until the user is to select one of the options and once the user select one of the options only content associated with that specific option should be visible.

I need to create this functionality using JavaScript but my knowledge of JavaScript is very limited and I don’t seem to find what I need online.

I believe what I need to do is create 6 different divs(one for each option) and toggle a class that makes them visilble once its respective title is selected.

Here is the dropdown menu that I have:

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

Any help will be greatly appreciated.

解决方案

I added the divs you mentioned and gave each an id which makes the Javascript a little easier.

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>

Working Example http://jsfiddle.net/qbzmz/

这篇关于如何显示内容取决于下拉菜单用户选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！