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; }