使用JavaScript或Jquery的选项下拉菜单显示项目

我已经构建了一个HTML页面以及一些CSS。我已经放置了一个按钮，提供多个会议的下拉菜单。每次您在此下拉列表中点击每个会议时，我都希望看到标题和一组文字，以提供此次会议中发生的事情的相关信息。以下是代码使用JavaScript或Jquery的选项下拉菜单显示项目

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Meeting Types</title> 
    <style> 
     #meetings div { 
      display: none; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
    </script> 

</head> 
<body> 

    <h1>Meetings Types</h1> 

    <div id="meetings"> 

     <form id="myForm"> 
      <select id="gatherings"> 
       <option value="" selected>Choose a Meeting</option> 
       <option value="meeting-a">Meeting A</option> 
       <option value="meeting-b">Meeting B</option> 
       <option value="meeting-c">Meeting C</option> 
      </select> 

     </form> 

     <p><button id="showAll">Show All Meetings</button></p> 

     <div id="meeting-a"> 
      <h2>Meeting A</h2> 
      <p>This meeting occured in district 10 with members of district of 12 with lots of input from 
      many different individuals.</p> 
     </div> 

     <div id="meeting-b"> 
      <h2>Meeting B</h2> 
      <p>This meeting occured in district 34 with members of 54 presiding.</p> 
     </div> 

     <div id="meeting-c"> 
      <h2>Meeting C</h2> 
      <p>This meeting occured in district 4 with members of district 45 presiding with input.</p> 
     </div> 

    </div> 
</body> 
</html>

我试图构建的JavaScript或jQuery的，这样，当我选择“选择会议下拉”开会下面我看到标题（什么是在在<h2>标签之间）和我在<p>标签之间写的内容。此外，当我点击“显示所有会议”按钮时，所有信息立即出现（即会议A的标题和相应的段落描述发生的事情，会议B的标题以及发生的事情，前往大会，C，并发生了什么吧。

我用几个计算器线程试图回答这个问题。其中一个线程使我here。还有一个促使我here，最有用的东西一直是这个w3school lesson这与我正在尝试完成的内容非常相似，但并不完全允许我在原始文件中的H2节点和P节点内显示材质。我认为jquery可能是最有效的方法，但Javascript也可能适用。

来源

2016-06-18 Dleightful

随着一些jQuery的，你可以做到这一点，你可以使用jQuery hide和show的方法来隐藏和显示相应的div和跟踪更改事件下拉选择改变：

$("#showAll").click(function(){ 
    $(".my-meeting").show(); 
}); 

$("#gatherings").change(function(){ 

    var valueSelected = this.value; 
    $(".my-meeting").hide(); 
    $("#" + valueSelected).show(); 
});

我还添加了.my-meeting类会议的div用于选择和隐藏所有div。

我认为你正在寻找的东西像This

来源

2016-06-18 07:31:16 hsh

你需要的电平变化dropdown功能，以显示各自的会议。为每个会议分配一个classdiv，以便通过隐藏divs隐藏类可以访问它。

在页面加载隐藏所有divs，当用户从下拉菜单中选择一个值分别显示div。

也会使你的按钮type="button因为目前你button是submitting 的page 下面是本

HTML

<div id="meetings"> 


      <select id="gatherings" onchange="ShowSelectedMeeting()"> 
       <option value="" selected="selected">Choose a Meeting</option> 
       <option value="meeting-a">Meeting A</option> 
       <option value="meeting-b">Meeting B</option> 
       <option value="meeting-c">Meeting C</option> 
      </select> 



     <p><button type="button" id="showAll" onclick="ShowAll()">Show All Meetings</button></p> 

     <div id="meeting-a" class="meeting"> 
      <h2>Meeting A</h2> 
      <p>This meeting occured in district 10 with members of district of 12 with lots of input from 
      many different individuals.</p> 
     </div> 

     <div id="meeting-b" class="meeting"> 
      <h2>Meeting B</h2> 
      <p>This meeting occured in district 34 with members of 54 presiding.</p> 
     </div> 

     <div id="meeting-c" class="meeting"> 
      <h2>Meeting C</h2> 
      <p>This meeting occured in district 4 with members of district 45 presiding with input.</p> 
     </div> 

    </div>

一个完整的解决方案的Javascript

<script> 
     $(function() { 

      $('.meeting').hide(); 

     }); 
     function ShowSelectedMeeting() 
     { 

      var Id = $("#gatherings").val(); 
      $('.meeting').hide();//To hide other meeting div so only one show at a time 
      $("#"+Id).show(); 
     } 

     function ShowAll() 
     { 
      $('.meeting').show(); 
     } 
</script>

来源

2016-06-18 07:33:53 Mairaj

使用JavaScript：

var slt = document.getElementById("gatherings"); 
var elems = document.getElementsByClassName("meeting"); 
slt.addEventListener("change", function() { 

    for (var i = 0; i < elems.length; i++) { 
     elems[i].style.display = "none"; 
    } 

    var elemId = slt.options[slt.selectedIndex].value; 
    document.getElementById(elemId).style.display = "block"; 
});

来源

2016-06-18 09:29:44

使用JavaScript或Jquery的选项下拉菜单显示项目

回答

相关问题