jQuery脚本无法在HTML页面中运行

时间:2017-02-04 08:26:04

标签: javascript jquery html css

我正在尝试使用jQuery脚本,但它没有按预期显示。我让它工作within JSFiddle。然而,它在我的页面中不起作用:当选择一个选项时,它根本不显示任何内容。我做错了什么?

<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="css/faqtest.css" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript">
    $('select').on('change',function() {
      var answer = $(this).val();
      $('.answers').hide();
      $('#'+answer).show();
    })
    </script>
    <select>
      <option disabled selected>choose</option>
      <option value="answer1">answer1</option>
      <option value="answer2">answer2</option>
      <option value="answer3">answer3</option>
    </select>
    <div class="answers" id="answer1">answer1</div>
    <div class="answers" id="answer2">answer2</div>
    <div class="answers" id="answer3">answer3</div>
  </body>
</html>

1 个答案:

答案 0 :(得分:2)

执行document ready上的代码。

$(function(){
  $('select').on('change',function() {
    var answer = $(this).val();
    $('.answers').hide();
    $('#'+answer).show();
  });
});