这是我的小提琴:http://fiddle.jshell.net/u83t19kc/(工作正常)
当前在我保存的文件中,当我从#filter中选择任何内容时,什么也没有发生。.也没有错误,但是我看不到为什么?
这是HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Product Comparison</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="script3.js"></script>
</head><body>
<select id="filter">
<option value="all">Show All</option>
<option value="dv">Show DV</option>
<option value="ov">Show OV</option>
</select>
<br />
<select id="geotrust">
<option value=""></option>
<option class="gt_dv">qssl</option>
<option class="gt_ov">tbizid</option>
<option class="tht_dv">ssl123</option>
<option class="tht_ov">sslweb</option>
</select>
<select id="thawte">
<option value=""></option>
<option class="gt_dv">qssl</option>
<option class="gt_ov">tbizid</option>
<option class="tht_dv">ssl123</option>
<option class="tht_ov">sslweb</option>
</select>
</body>
</html>
这是script3.js的内容
$(document).ready(function(){
$.fn.optVisible = function(stateVal) {
var isBool = typeof stateVal === "boolean";
return this.each(function () {
var $this = $(this);
if (isBool) {
if (stateVal) $this.filter("span > option").unwrap();
else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
}
else {
$this.filter("span > option").toggleOptionVisibility(true);
$this.filter(":not(span > option)").toggleOptionVisibility(false);
}
});
}
$("#filter").change(function(){
if ($("#filter option[value='all']").attr('selected')) {
//alert('all');
$( "#geotrust option" ).optVisible( true );
$( "#thawte option" ).optVisible( true );
}
if ($("#filter option[value='dv']").attr('selected')) {
$("[class*='dv']").optVisible( true );
$("[class*='ov']").optVisible( false );
}
if ($("#filter option[value='ov']").attr('selected')) {
$("[class*='ov']").optVisible( true );
$("[class*='dv']").optVisible( false );
}
});
});
最佳答案
尝试使用.is(':selected')
代替.attr('selected')
:
$("#filter").change(function(){
if ($("#filter option[value='all']").is(':selected')) {
alert('all');
$( "#geotrust option" ).optVisible( true );
$( "#thawte option" ).optVisible( true );
}
if ($("#filter option[value='dv']").is(':selected')) {
$("[class*='dv']").optVisible( true );
$("[class*='ov']").optVisible( false );
}
if ($("#filter option[value='ov']").is(':selected')) {
$("[class*='ov']").optVisible( true );
$("[class*='dv']").optVisible( false );
}
});
http://devstage.co/script3.test.html