javascript - 显示和隐藏 div

Question

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

所以从第 1 节开始 - 如果选择了运动，那么它会将其定向到 #第 2 节，而其他 div 则被隐藏，因为它们是不相关的。

我不知道如何启动它，使用 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>

我忘了添加css位：

#section2, #section3 {
    display:none; border:1px solid gray; padding:8px; margin-top:12px; width:400px;
    }

Answer 1

用这个

function selection()
{

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


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

Answer 2

你可以这样管理

    $(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();
            }

          });

    })
      });