Question

我很难弄清楚为什么这段代码无法在Chrome中正确解析，但似乎在IE和FF中。这是一个简单的脚本，但我在这一个小小的挂断中失去了它。感谢帮助。感谢。

<!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>

Answer 1

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

请尝试使用prop()。

Answer 2

使用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>

Fiddle

中的

DEMO

JQuery代码段适用于IE，FF不适用于Chrome？

2 个答案: