Открытие опции выбора html на фокусе

Question

Я задал вопрос о How to open option list of HTML select tag on onfocus(). В то время он решил мою проблему, но я пропустил одну проблему: каждый раз при открытии опции выбора html onfocus следующая опция выбора исчезла.

Я не могу найти, что происходит с этим кодом. вот ссылка на этот проблемный вопрос jsFiddle.

Answer 1

Да, это то, что линии

var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']"; 
$(x).fadeTo(50,0); 

сделать. Они скрывают следующий выбор, потому что иначе он будет отображаться поверх расширенного.

Это не совсем хорошее решение. Вместо этого я хотел бы использовать Z-индекс, чтобы не допустить этого:

$('select').focus(function(){ 
    $(this).attr("size",$(this).attr("expandto")).css('z-index',2);   
}); 
$('select').blur(function(){ 
    $(this).attr("size",1).css('z-index','1');   
}); 
$('select').change(function(){ 
    $(this).attr("size",1).css('z-index','1'); 
}); 

Было бы еще лучше использовать класс вместо встроенного стиля. Но я использовал это как демонстрацию.

http://jsfiddle.net/PpTeF/1/

Answer 2

Просто раскомментируйте функцию fadeTo. проверьте это http://jsfiddle.net/PpTeF/2/

$(document).ready(function(){ 
$('select').focus(function(){ 
    $(this).attr("size",$(this).attr("expandto")); 
    var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']"; 
    //$(x).fadeTo(50,0); 
}); 
$('select').blur(function(){ 
    $(this).attr("size",1); 
    var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";  
    //$(x).fadeTo('fast',1.0); 
}); 
$('select').change(function(){ 
    $(this).attr("size",1); 
    var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";  
    //$(x).fadeTo('fast',1.0);    
}); 
}); 

Cheers !!