这是我的小提琴: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

10-04 15:33