帮忙改个小程序 谢谢！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#title").change(function() {
       $(".postItem").hide();
       var selectedIndex = $("#title").get(0).selectedIndex;
       $($(".postItem").get(selectedIndex )).show();
       });
});
-->
</script>
</head>
<body>
<select class="selStyle1" id="title" name="title">
  <option>新闻</option>
  <option>娱乐</option>
  <option>体育</option>
</select>
<div class="postItem">新闻新闻新闻新闻新闻新闻</div>
<div class="postItem">娱乐娱乐娱乐娱乐娱乐娱乐</div>
<div class="postItem">体育体育体育体育体育体育</div>
</body>
</html>问题:默认选择的是新闻 理应只显示“新闻新闻新闻新闻新闻新闻” 但是其他两个也显示了 怎样半呢？

解决方案 »

  1.   


    $(document).ready(function(){
    $('.postItem:gt(0)').hide()
    $("#title").change(function() {
      $(".postItem").hide();
      var selectedIndex = $("#title").get(0).selectedIndex;
      $($(".postItem").get(selectedIndex )).show();
      });
    });
      

  2.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
    $(document).ready(function(){
    $('.postItem:gt(0)').hide()
    $("#title").change(function() {
      $(".postItem").hide();
      var selectedIndex = $("#title").get(0).selectedIndex;
      $($(".postItem").get(selectedIndex )).show();
      });
    });
    -->
    </script>
    </head>
    <body>
    <select class="selStyle1" id="title" name="title">
      <option>新闻</option>
      <option>娱乐</option>
      <option>体育</option>
    </select>
    <div class="postItem">新闻新闻新闻新闻新闻新闻</div>
    <div class="postItem">娱乐娱乐娱乐娱乐娱乐娱乐</div>
    <div class="postItem">体育体育体育体育体育体育</div>
    </body>
    </html>