How do I Hide/Show options elements by class

[LyndonOHRC]

I have a large select element and would like to filter its options with some radio buttons. I tried jquery .hide()/.show() but no luck. Any suggestions appreciated.

<script type="text/javascript" language="JavaScript">
[indent]$( document ).ready(function() {[/indent]
[indent]$('.Any').css('background-color','#ADD8E6')
$('.TB').css('background-color','#FFE4B5')
$('.QH').css('background-color','#90EE90')
$('.PT').css('background-color','#FFC0CB')
$('.AP').css('background-color','#FAFAD2')
[/indent][indent][/indent]});

function filterOptions(elem){
 if (elem == 'All') {
  $('option').show();
 }
 else {
  $('option').hide();
  $('.' + elem).show();
 }
}
</script>

<form action="targetReport.cfm" target="_blank" method="post">
 <select name="targetReport" id="targetReport">
  <option class="Mixed" value='AllBreedsHorseofTheYear.cfm'>Any Breed - Horse of the Year</option>
  <option class="Mixed" value='FairMeetChampion.cfm'>Any Breed - Fair Meet Champion</option>
  <option class="TB" value='TBHorseofTheYear.cfm'>TB - Horse of the Year</option>
  <option class="TB" value='TB2yFilly.cfm'>TB - Two Year Old Filly</option>
  <option class="TB" value='TB2yColt.cfm'>TB - Two Year Old Colt/Gelding</option>
  <option class="TB" value='TB3yFilly.cfm'>TB - Three Year Old Filly</option>
  <option class="TB" value='TB3yColt.cfm'>TB - Three Year Old Colt/Gelding</option>
  <option class="TB" value='TBChampionMare.cfm'>TB - Champion Mare</option>
  <option class="TB" value='TBChampionSire.cfm'>TB - Champion Stallion/Gelding</option>
  <option class="TB" value='TBLeadingRaceStockOwner.cfm'>TB - Leading Owner</option>
  <option class="TB" value='TBLeadingDam.cfm'>TB - Leading Dam of Racing Stock</option>
  <option class="TB" value='TBLeadingBreeder.cfm'>TB - Leading Breeder of Racing Stock</option>
  <option class="TB" value='TBLeadingSire.cfm'>TB - Leading Sire of Racing Stock</option>
  <option class="TB" value='TBLeadingSireOwner.cfm'>TB - Leading Sire Owner of Racing Stock</option>
  <option class="TB" value='TBLeadingFemaleSprinter.cfm'>TB - Leading Female Sprinter</option>
  <option class="TB" value='TBLeadingMaleSprinter.cfm'>TB - Leading Male Sprinter</option>
  <option class="TB" value='TBLeadingFemaleTurf.cfm'>TB - Leading Female Turf Runner</option>
  <option class="TB" value='TBLeadingMaleTurf.cfm'>TB - Leading Male Turf Runner</option>
  <option class="TB" value='TBLeadingClaimer.cfm'>TB - Leading Claimer of the Year</option>
  <option class="QH" value='QHHorseofTheYear.cfm'>QH - Horse of the Year</option>
  <option class="QH" value='QH2yFilly.cfm'>QH - Two Year Old Filly</option>
  <option class="QH" value='QH2yColt.cfm'>QH - Two Year Old Colt/Gelding</option>
  <option class="QH" value='QH3yFilly.cfm'>QH - Three Year Old Filly</option>
  <option class="QH" value='QH3yColt.cfm'>QH - Three Year Old Colt</option>
  <option class="QH" value='QHAgedMare.cfm'>QH - Aged Mare</option>
  <option class="QH" value='QHAgedStallion.cfm'>QH - Aged Stallion/Gelding</option>
  <option class="QH" value='QHLeadingRaceStockOwner.cfm'>QH - Leading Owner</option>
  <option class="QH" value='QHLeadingDam.cfm'>QH - Leading Dam of Racing Stock</option>
  <option class="QH" value='QHLeadingSire.cfm'>QH - Leading Sire of Racing Stock</option>
  <option class="QH" value='QHLeadingBreeder.cfm'>QH - Leading Breeder of Racing Stock</option>
  <option class="QH" value='QHLeadingSireOwner.cfm'>QH - Leading Sire Owner of Racing Stock</option>
  <option class="PT" value='PTHorseofTheYear.cfm'>Paint - Horse of the Year</option>
  <option class="PT" value='PT2yHorseofTheYear.cfm'>Paint - Two Year Old Horse of the Year</option>
  <option class="PT" value='PT3yHorseofTheYear.cfm'>Paint - Three Year Old Horse of the Year</option>
  <option class="PT" value='PTAgedHorseofTheYear.cfm'>Paint - Aged Horse of the Year</option>
  <option class="PT" value='PTLeadingDam.cfm'>Paint - Leading Dam of Racing Stock</option>
  <option class="PT" value='PTLeadingSire.cfm'>Paint - Leading Sire of Racing Stock</option>
  <option class="AP" value='APHorseofTheYear.cfm'>Appaloosa - Horse of the Year</option>
  <option class="AP" value='AP2yHorseofTheYear.cfm'>Appaloosa - Two Year Old Horse of the Year</option>
  <option class="AP" value='AP3yHorseofTheYear.cfm'>Appaloosa - Three Year Old Horse of the Year</option>
  <option class="AP" value='APAgedHorseofTheYear.cfm'>Appaloosa - Aged Horse of the Year</option>
  <option class="AP" value='APLeadingDam.cfm'>Appaloosa - Leading Dam of Racing Stock</option>
  <option class="AP" value='APLeadingSire.cfm'>Appaloosa - Leading Sire of Racing Stock</option>
 </select>
 <input type="submit" value="Print Preview">
</form>
<div>
 <input Name ="filter" type="radio" onclick="filterOptions('All')"> All
 <input Name ="filter" type="radio" onclick="filterOptions('Mixed')"> Mixed
 <input Name ="filter" type="radio" onclick="filterOptions('TB')"> TB
 <input Name= "filter" type="radio" onclick="filterOptions('QH')"> QH
 <input Name= "filter" type="radio" onclick="filterOptions('AP')"> AP
</div>

Lyndon

 

[ChrisHirst]

Use <optgroup> elements or use javascript to remove or add options, hiding option elements with CSS does NOT actually 'hide' them from being selected as choices in the list.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum