[jQuery] jQuery + SelectBox + IE don't work

Mon, 11 Feb 2008 12:07:10 -0800 

There is some problem with this script working in IE. It works in
FireFox. The whole thing consists of HTML page, JS file and CSS file.
The following html page is validated XHTML. It contains Select box and
two anchors for filtering the content of that select box.
One filter filters options by first letter. The other filter is toggle
type.

<!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"; xml:lang="en" lang="en">
        <head>
                <title></title>
                <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /
>
                <link rel="stylesheet" type="text/css" href="style.css" />
                <script type="text/javascript" src="jquery/jquery-1.2.3.js"></
script>
                <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
                <a id="toggle" href="">Just own/Not just own</a>
                <br />
                <a id="alphabetall" href="#">Все</a>
                <a class="alphabet" href="#">A</a>
                <a class="alphabet" href="#">B</a>
                <a class="alphabet" href="#">C</a>
                <a class="alphabet" href="#">P</a>
                <br />
                <select id="market">
                        <option class="product own" value="0"></option>
                        <option class="product own A" value="11">Apple</option>
                        <option class="product own B" value="12">Banana</option>
                        <option class="product own A" 
value="13">Apricot</option>
                        <option class="product P" value="21">Potato</option>
                        <option class="product own P" value="14">Peach</option>
                        <option class="product C" value="22">Carrot</option>
                        <option class="product C" value="23">Cabbage</option>
                </select>
        </body>
</html>

Script file is quite simple and follows:

$(document).ready(function(){
        $(".alphabet").click(function() {
                var al = $(this).html();
                if(onlyown==0) {
                        $(".product").hide();
                        alert($(".product").text());
                        $(".product").hide().filter("."+al).show();
                        $("#market").val(0);
                } else if(onlyown==1) {
                        $(".product").hide().filter(".own."+al).show();
                        $("#market").val(0);
                }
                return false;
        });


        //*********When All is clicked show all records
        $("#alphabetall").click(function() {
                if(onlyown==0) {
                        $(".product").show()
                        return false;
                } else if (onlyown==1) {
                        $(".product.own").show()
                        return false;
                }
        });


        //*********When this is toggled show only OWN or ALL records
        var onlyown=0;
        $("#toggle").click(function() {
                if(onlyown==0) {
                        $(".product").hide().filter(".own").show();
                        onlyown=1;
                } else if (onlyown==1) {
                        $(".product").show();
                        onlyown=0;
                }
                return false;
        });
});

Just in case here is CSS:

.product {
        font-family:Arial;
        color:green;
}
.own {
        font-weight:bold;
        color:blue;
}

Reply via email to