javascript - cross browser issues jquery dropdown menu -

ok made site while , had issues menu system needed. click location on map, displays list of sub locations in dropdown menu right. these chance display based on options class.

i have put site @ shiftera.co.uk can see their.

the issue first. 1) ie - list never filters out, displays results time regardless of class. 2) chrome - dropdown squashed showing 1 result , hiding others need use up/down arrows change, shows 3, 4. 3) firefox - list displays in 1 long row, not usual dropdown.

i think issue more of css problem or multitude of css problems.

an example of map link is

<a href="scotland#browse" class="areaselect" id="scotland" title="scotland">scotland</a> 

the dropdown list although not seperated generated database , appears below

<option value='ab25 1uh' class="scotland">aberdeen</option><option value=' wa14 4dw' class="northwest">altrincham</option> 

as can see, have space before don't. dropdown has id of apick , im using css below hide on load.

#apick { display: none; } 

here javascript display correct items based on map click.

//<![cdata[  $(document).ready(function(){      $('.areaselect').on('click', function(event){         $('#apick').css('display','inline');         var id = $(this).attr('id')         $('#apick option').not('.'+id).css('display','none');         $('.'+id).css('display','inline').first().attr('selected','selected');         event.preventdefault();     }); }); //]]> 

this has been driving me mad long time now, seem's if fix 1 issue 2-3 created. figured i'd try here , see if brightspark can narrow down issue.

• updated removing windows load per change main website.

the simple answer setting style inline. <option> tag should not inline, or have style that. inline style causing problems.

instead add <option> tags when need them. store values in object add/remove them.

by way. remove window load thing.

here javascript fix:

$(document).ready(function() {     var options = $('#apick option');     var values = $.map(options, function(option)     {         return option;     });      $('.areaselect')         .on('click', function()         {             var apick = $('#apick').empty();             var id = $(this).attr('id');              var newvalues = $.grep(values, function(n, i)             {                 return $(n).hasclass(id);             });              apick.append(newvalues).show().find('option:first').attr('selected','selected');              return false;         }); });