Combobox dropdown list disappears
I am trying to use the code below to create the following behavior for comboboxes
with class = "requiredCombo" -
1. If the selected index is 0, I want the font to be grey; otherwise black.
2. When the mouse enters the box, I want to change the font to black while the user is making a
selection.
3. If the mouse leaves the combo and the user did not click (that is, they just ran the mouse over the
combobox) and the selected index is 0, I want the font to be grey otherwise black.
4. If the user clicks on a selection and it is not index = 0 I want the font to be black.
The following code works great in Firefox but in IE 7 when I include the "mouseleave" code, the dropdown list opens up when I click the dropdown but as soon as I try to move into the list to make a selection, the dropdown list closes. Any suggestions what I can do?
$('.requiredCombo').each(function(){
if (this.selectedIndex == 0) {
$(this).css({'color':'#C0C0C0'});
} else {
$(this).css({'color':'black'});
}
$(this).blur(function(){
if (this.selectedIndex == 0) {
$(this).css({'color':'#C0C0C0'});
} else {
$(this).css({'color':'black'});
}
});
});
$('.requiredCombo').bind('mouseenter', function(){
$(this).css({'color':'black'});
});
$('.requiredCombo').bind('mouseleave', function(){
if (this.selectedIndex == 0) {
$(this).css({'color':'#C0C0C0'});
} else {
$(this).css({'color':'black'});
}
});
TIA,
John