2015-08-09 67 views
0

我很难搞清楚为什么这段代码在Chrome中不能正确解析,但似乎在IE和FF中。这是一个简单的脚本,但我失去了这一个小小的挂断。帮助表示赞赏。谢谢。JQuery代码片段在IE中可用,FF不是Chrome吗?

<!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=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<select> 
    <option value="a">Select A</option> 
    <option value="b">Select B</option> 
    <option value="c">Select C</option> 
</select> 
<form method="post" action=""> 
    <div class="col-md-12 A" style="display:none;"> 
     Show Div A 
    </div> 
    <div class="col-md-12 B" style="display:none;"> 
     Show Div B 
    </div> 
    <div class="col-md-12 C" style="display:none;"> 
     Show Div C 
    </div> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    //$(".cabinl").show(); 
    $('option').click(function(){ 

     if($(this).attr("value")=="a"){ 
      $(".A").toggle(); 
      $(".B").hide(); 
      $(".C").hide(); 
     } 
     else if($(this).attr("value")=="b"){ 
      $(".B").toggle(); 
      $(".A").hide(); 
      $(".C").hide(); 
     } 
     else if($(this).attr("value")=="c"){ 
      $(".C").toggle(); 
      $(".A").hide(); 
      $(".B").hide(); 
     } 
    }); 
}); 
</script> 
</body> 
</html> 

回答

0

根据我的经验attr()对某些浏览器不起作用。

尝试使用prop()代替。使用

0

select代替option

$('select').click(function(){ 
 

 
     if($(this).attr("value")=="a"){ 
 
      $(".A").toggle(); 
 
      $(".B").hide(); 
 
      $(".C").hide(); 
 
     } 
 
     else if($(this).attr("value")=="b"){ 
 
      $(".B").toggle(); 
 
      $(".A").hide(); 
 
      $(".C").hide(); 
 
     } 
 
     else if($(this).attr("value")=="c"){ 
 
      $(".C").toggle(); 
 
      $(".A").hide(); 
 
      $(".B").hide(); 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<select> 
 
    <option value="a">Select A</option> 
 
    <option value="b">Select B</option> 
 
    <option value="c">Select C</option> 
 
</select> 
 
<form method="post" action=""> 
 
    <div class="col-md-12 A" style="display:none;"> 
 
     Show Div A 
 
    </div> 
 
    <div class="col-md-12 B" style="display:none;"> 
 
     Show Div B 
 
    </div> 
 
    <div class="col-md-12 C" style="display:none;"> 
 
     Show Div C 
 
    </div> 
 
</form>

DEMOFiddle

相关问题