I had asked a question about How to open option list of HTML select tag on onfocus(). At that time it solved my problem but I missed one problem that every time on opening a html select option onfocus next select option went disappear.

I not able to find whats going wrong with this code. here is link for that problematic question jsFiddle.

I had asked a question about How to open option list of HTML select tag on onfocus(). At that time it solved my problem but I missed one problem that every time on opening a html select option onfocus next select option went disappear.

I not able to find whats going wrong with this code. here is link for that problematic question jsFiddle.

• javascript
• jquery
• html
• html-select

• 3 What are you trying to do? Are you trying to keep multiple drop down menus open at the same time? – Ioannis Karadimas Commented Aug 14, 2013 at 8:44
• @Ioannis Karadimas no. i want to open select onfocus one by one,but select one next select tag goes disappear.like on selecting One to Seven at that time One to Ten goes disappear. – Vijay Commented Aug 14, 2013 at 8:48
• 1 for reference : http://jsfiddle/PpTeF/8/ this link satisfy my need. – Vijay Commented Aug 14, 2013 at 10:00

2 Answers 2

Yes, that's what the lines

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

do. They hide the next select, because otherwise it would show on top of the expanded one.

This isn't a good solution at all though. Instead i'd use z-index to prevent that from happening:

$('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');
}); 

It would be even better to use a class instead of inline style. But i used that just as a demonstration.

http://jsfiddle/PpTeF/1/

Just ment out the fadeTo function. check this http://jsfiddle/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!!