Can you force a select list to start as open

[ggallen]

What I'm doing is I have a <DIV> section with a <SELECT> list
it is normally hidden. When I click on a button, I make this <DIV>
visible, but is there a way to open the select list as well?

I'm using a custom "arrow" to open the select list, when you
click on the arrow, I unhide the real select list, but it's still
closed, and you have to click on the arrow of the select list again.

Thanks
George

[Willy Duitt]

Did you try: <select size="5".....

[ggallen]

I'm not sure I get your response.

What I want to do is have javascript, open the select box.
and not have to have someone click on the little arrow.

below is some code:(Ignore the JSPCODE..., it's just a wrapper)

When someone clicks on the arrow image, it causes the select list
which is currently hidden, to become visible, and gets the focus.
now the only problem is that you still have click on the real arrow
now.

What I want to do, is make it visible, give it the focus, AND have
open up.

George


JSPCODE<-1>='function showtitlelist() {'
JSPCODE<-1>=' var cc4=window.open("","detail1","");'
JSPCODE<-1>=' cc4.document.getElementById("ANM-B").style.visibility="";'
JSPCODE<-1>=' cc4.document.getElementById("ANM-B").style.display="";'
JSPCODE<-1>=' cc4.document.getElementById("NTITLEB").focus();'
JSPCODE<-1>=' return;'
JSPCODE<-1>='}'


JSPCODE<-1>=\ cc4.document.write("<INPUT TYPE='TEXT' NAME='NTITLEA' SIZE=15>");\
JSPCODE<-1>=\ cc4.document.write("<BUTTON OnClick='opener.showtitlelist();'><IMG SRC='/arrow.gif'></BUTTON>");\
JSPCODE<-1>=\ cc4.document.write("</DIV>");\
JSPCODE<-1>=\ cc4.document.write("<DIV ID='ANM-B' STYLE='visibility:hidden ; display:none' ALIGN='CENTER'>");\
JSPCODE<-1>=\ cc4.document.write("<SELECT NAME='NTITLEB' OnBlur='opener.hidetitlelist();'>");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Select'>Select");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Dr.'>Dr.");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Miss'>Miss");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Mr.'>Mr.");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Mrs.'>Mrs.");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Ms.'>Ms.");\
JSPCODE<-1>=\ cc4.document.write("<OPTION VALUE='Prof.'>Prof.");\
JSPCODE<-1>=\ cc4.document.write("</SELECT>");\
JSPCODE<-1>=\ cc4.document.write("</DIV>");\

[Willy Duitt]

Obviously you didn't try....
Try adding size="7" to your select tag....

You have 7 options, when you change the wrapper divisions style visibility, the select will appear with all 7 options showing...

However, I would use display:none as oppossed to visibility:hidden in that the former will not take up any place on the page until displayed/visible while the latter will reserve that space on the page....

.....Willy

[Roy Sinclair]

Basically, the answer is no. You cannot force the select list to be in the "opened" mode from javascript.

[ggallen]

I didn't use size for the same reason I use visibility:hidden.

I don't want space reserved.

With the size=1 when the box drops down, it doesn't push
the rest of the form down, it overwrites.

With size=2+ when it displays the list, it pushes the rest
of the form down.

For this application, I have a set amount of vertical space to
work with, which is why if it doesn't need to shown, I don't
want the space reserved.

That's why I didn't understand why Size would have made a difference
in making the list open...which it does kinda work, just not the way
I needed it to. (I did try it prior however).

Thanks
George

[Willy Duitt]

Hi Roy;

I would beg to differ on that...

I would think that you could use: element.setAttribute('size',7)

But there is nothing in the above which would warrant this except for the fact that visibility:hidden would reserve the opened although hidden selects space on the page. While display:none will not take up any space on the page until displayed...

JMHO;
.....Willy

[Willy Duitt]

I didn't use size for the same reason I use visibility:hidden.

What is the reason for using visibility:hidden when display:none would be more appropriate??

.....Willy

[ggallen]

My reason was "Because that's the way I always did it" :)

Actually, I was using both. I tried with just the display:none which
really didn't change anything, it did the same thing, and again added
in the SIZE factor, which again, pushes the rest of the form down.
Which is no good, since I'm working in a small apx 2" x 2" box and
when the form gets pushed down, you can't read it.

Where as SIZE=1, when it you do click on the arrow, it will drop down
a list of 7, but will show the list outside the window and/or overtop
of other fields (instead of moving them out of the way).

That is the key here.

I suspect that changing the size within the element will do the same
just cause the rest of the form to be pushed down (I'll try it anyway,
just in case my suspicions are false).

I'm emulating the contact entry screen from Outlook, it doesn't have
to exactly the same, but be fairly close. I can live with having to click
twice, just wouldn't have been quicker to only have to click once.

George

[joh6nn]

it seems to me that there might be some miscommunication here; perhaps seeing the page that this is on could clear somethings up, and give us all a better idea of how to achieve what you want?

[Willy Duitt]

I see what you mean by opening the select using the arrow will enable the options to sit on top of the content below while having the menu opened on display pushes the content down...

Unfortunetly you can not add a z-index to have the opened select sit on top of the content below but you could use the onchange event handler to setAttribute('size',1) to collapse the option menu once an item is chosen....


<select size="5"
onchange="this.setAttribute('size',1)"
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>


Or:

<select size="1"
onmouseover="this.setAttribute('size',5)"
onmouseout="this.setAttribute('size',1)"
onchange="this.setAttribute('size',1)">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>


.....Willy

[ggallen]

That will take a little work...

The page is created dynamically, and that system is behind a firewall.
I'll have to create the page, save the source, then put that page up
a different website (I have one available). It'll take some moving around.

What I'll do is create two page, one with SIZE, one without to see
the difference. (one caveat, the page is pretty much IE specific).

George

[ggallen]

Willy,

Getting it to compress isn't a problem, Once it's selected
It goes back into hiding anyway.

The major problem is I have one select at the top of
window (which ok, when text is pushed down, you
can still see it), but I also have one at the bottom of the
window, and when that opens, you can see part of the
choices, because they are below the window. I don't
have scroll bars on the window, and would rather not
add them.

So..at this point. It looks like it take two clicks instead of one.
Not a major problem.

Thanks for the input.
George

[Willy Duitt]

Well the only other thing I can think of is that size="2" will place scrollbars within the select menu....

But you would need the space to display two options...

.....Willy

[ggallen]

I tried that. The only problem with that is that you need to use
the scroll bars to scroll through the choices.

With the Size=1, there are a small enough list of choices, that
they are all displayed.

I know...picky picky.

But, having to click twice, is better than scrolling through 7 selections.

Thanks
George