JS获取下拉框的值,并跟据值来决定显示内容

   小弟最近写了一段代码,如下.起初,页面默认显示的是DIV CON1里的内容,当选择了下拉框里的值时,页面显示查询结并隐去DIV CON1的内容.现在是不管有没有选择下拉框,都是显示DIV CON1.现请教个位大侠是哪里错了,应该如何写?谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签轮换</title>
<script type="text/javascript">
  var t = document.getElementById("select_con"); 
  alert(t.options[t.selectedIndex].value);
  {
    if (t.options[t.selectedIndex].value != 0);
    document.getElementById("con2").style.display="block";
  } 
  
</script> 
</head><body>
<div id="top">
<select name="pr" id="select_con">
  <option value="0">请选择城市</option>
  <option value="1">广州</option>
  <option value="2">深圳</option>
  <option value="3">东莞</option>
</select>
</div>
<div id="con1"><h2>中华人民共和国</h2></div>
<div style="display:none" id="con2"><p>显示查询结果</p></div>
</body>
</html>

解决方案 »

  1.   

    是不是这样：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>标签轮换 </title> 
    <script type="text/javascript"> 
      window.onload=function() {
    var t = document.getElementById("select_con"); 
      t.onchange=function() 
      { 
    if (t.options[t.selectedIndex].value != 0)
    document.getElementById("con2").style.display="block"; 
    else
    document.getElementById("con2").style.display="none"; 
      } 
      }
      
    </script> 
    </head> <body> 
    <div id="top"> 
    <select name="pr" id="select_con"> 
      <option value="0">请选择城市 </option> 
      <option value="1">广州 </option> 
      <option value="2">深圳 </option> 
      <option value="3">东莞 </option> 
    </select> 
    </div> 
    <div id="con1"> <h2>中华人民共和国 </h2> </div> 
    <div style="display:none" id="con2"> <p>显示查询结果 </p> </div> 
    </body> 
    </html>
      

  2.   

    设置Div的状态 block none
      

  3.   

    你的错误是if后面加了;号，导致if判断不起作用，后面的语句都会执行。window.onload = function (){
      var t = document.getElementById("select_con");
      t.onchange = function() {
      {
    if (t.options[t.selectedIndex].value != 0){
    document.getElementById("con2").style.display="block";
    document.getElementById("con2").innerHTML="<p>"+t.options[t.selectedIndex].text+"</p>";
    document.getElementById("con1").style.display="none";
    } else {
    document.getElementById("con1").style.display="block";
    document.getElementById("con2").style.display="none";
    }
      }
    }
      }
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>标签轮换 </title> 
    <script type="text/javascript"> 
    function sChange(t){
      if (t.options[t.selectedIndex].value != 0)
        document.getElementById("con2").style.display="block"; 
      else
        document.getElementById("con2").style.display="none";
    }
    </script>
    </head> <body> 
    <div id="top"> 
    <select name="pr" id="select_con" onchange=sChange(this)> 
      <option value="0">请选择城市 </option> 
      <option value="1">广州 </option> 
      <option value="2">深圳 </option> 
      <option value="3">东莞 </option> 
    </select> 
    </div> 
    <div id="con1"> <h2>中华人民共和国 </h2> </div> 
    <div style="display:none" id="con2"> <p>显示查询结果 </p> </div> </body> 
    </html>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>标签轮换 </title> 
    <script type="text/javascript"> 
      function change() {
        var t = document.getElementById("select_con"); 
          t.onchange=function() 
          { 
            if (t.options[t.selectedIndex].value != 0)
                document.getElementById("con2").style.display="block"; 
            else
                document.getElementById("con2").style.display="none"; 
          } 
      }</script> 
    </head> <body> 
    <div id="top"> 
    <select name="pr" id="select_con" OnChange="change()"> 
      <option value="0">请选择城市 </option> 
      <option value="1">广州 </option> 
      <option value="2">深圳 </option> 
      <option value="3">东莞 </option> 
    </select> 
    </div> 
    <div id="con1"> <h2>中华人民共和国 </h2> </div> 
    <div style="display:none" id="con2"> <p>显示查询结果 </p> </div> 
    </body> 
    </html>