Javascript 显示和隐藏div

我还是个新手所以是的。。。基本上，我有这个下拉元素，元素中的每个选项都应该指向不同的问题（对应于选项的主题），但是一旦选择了这个选项，其他不相关的div就会被隐藏

因此，从第1节开始——如果选择了体育，那么它会将其指向第2节，而其他分区则隐藏起来，因为它们是不相关的

我不知道如何使用javascript启动它-我知道它涉及函数ShowItem（），而不使用jquery。我想知道有没有人能帮我一把

html代码：

<form id="survey" action="#" method="post">

<div id="section1">
    <label for="color">What is your hobby?</label>
    <select id="hobby" onchange="selection()">
        <option value="sports">sports</option>
        <option value="reading">reading</option>
        <option value="watching">watching movies</option>
    </select>
</div>
<div id="section2">
    What is your favourite sports?<br>
    <label for="netball">netball</label><input type="radio" id="netball">
    <label for="football">football</label><input type="radio" id="football">
    <label for="baseball">baseball</label><input type="radio" id="vegetarian">
</div>
<div id="section3">
    What is your favourite genre?<br>
    <label for="crime">crime</label><input type="radio" id="crime">
    <label for="fantasy">fantasy</label><input type="radio" id="fantasy">
    <label for="scifi">sci fi</label><input type="radio" id="scifi">
</div></form>

---

你可以这样处理

    $(document).ready(function(){
        $("#hobby").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            if ( $(this).text()=='sports' )
            {
                 $("#section2").show();
                    $("#section1").hide();
                    $("#section3").hide();
            }
           if ( $(this).text()=='reading' )
            {
                 $("#section1").show();
                    $("#section2").hide();
                    $("#section3").hide();
            }

          });

    })
      });      

用这个

function selection()
{

  var vHobby = $("#hobby").val();
  if(vHobby == 'sports')
  {
      $("#section2").show();
      $("#section1, #section3").hide();


  }
  if(vHobby == 'reading')
  {
       $("#section1").show();
       $("#section2, #section3").hide();                   
  }
}

---

如果你试过的话，你也可以展示js相关的代码吗。。！嗨，谢谢你的回复。你能告诉我“v”是什么意思吗？它只是一个变量声明标准，v表示变量。哦，谢谢你的澄清。不过我还没有让它工作。谢谢你的回复。我试过这个代码，但仍然不起作用。CSS中的display:none是否会对其产生影响？类似地，您可以在style属性中设置display:block，也可以创建另一个样式，并可以设置样式，如create CSS unhide{display:block；border:1px纯灰；padding:8px；margin top:12px；width:400px；}，并且可以使用$（“div”）.CSS（“unhide”）；

function selection()
{

  var vHobby = $("#hobby").val();
  if(vHobby == 'sports')
  {
      $("#section2").show();
      $("#section1, #section3").hide();


  }
  if(vHobby == 'reading')
  {
       $("#section1").show();
       $("#section2, #section3").hide();                   
  }
}