By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,646 Members | 1,175 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,646 IT Pros & Developers. It's quick & easy.

Select element - How to auto-dropdown?

P: n/a
In our current application we have a page whose sole purpose for existence
is to permit the user to select from a list (subsequent to our login page).
We would like to have the list drop down automatically when the visitor
arrives at the page, perhaps by using the onLoad event to call the dropdown
code. The problem is, the click() event does not drop down the list, as I
would have thought it might.

I can successfully fire other methods using the object.method() syntax. Our
form is named "test," the select is named "sel1," and the code
document.test.sel1.focus() in fact focuses the control,
document.test.sel1.selectedIndex=2 selects the third item, etc. Given that,
I would have thought that document.test.sel1.click() would cause a similar
result to clicking the control, i.e., dropdown of the select. Instead, all
that happens is what appears to be a very quick redraw of the selected
value's text (i.e., it flickers slightly).

I've tried preceding the call to click() with a call to focus(), and vice
versa. No joy. I've Googled on several combinations of search terms, but
either there's no information on how to accomplish this or it was deeper
than the 3-4 pages I followed down into each of the search results.

Anybody know if it is possible to do what we want, and if so, could you
point me to a link where I can find sample source? Thank you.

Cheers,
Scott
Jul 23 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Lee
Prowler said:

In our current application we have a page whose sole purpose for existence
is to permit the user to select from a list (subsequent to our login page).
We would like to have the list drop down automatically when the visitor
arrives at the page, perhaps by using the onLoad event to call the dropdown
code. The problem is, the click() event does not drop down the list, as I
would have thought it might.

I can successfully fire other methods using the object.method() syntax. Our
form is named "test," the select is named "sel1," and the code
document.test.sel1.focus() in fact focuses the control,
document.test.sel1.selectedIndex=2 selects the third item, etc. Given that,
I would have thought that document.test.sel1.click() would cause a similar
result to clicking the control, i.e., dropdown of the select. Instead, all
that happens is what appears to be a very quick redraw of the selected
value's text (i.e., it flickers slightly).

I've tried preceding the call to click() with a call to focus(), and vice
versa. No joy. I've Googled on several combinations of search terms, but
either there's no information on how to accomplish this or it was deeper
than the 3-4 pages I followed down into each of the search results.

Anybody know if it is possible to do what we want, and if so, could you
point me to a link where I can find sample source? Thank you.


You know that the SIZE attribute specifies how many options should
be visible, right?

Jul 23 '05 #2

P: n/a
Prowler wrote:
In our current application we have a page whose sole purpose for existence
is to permit the user to select from a list (subsequent to our login
page). We would like to have the list drop down automatically when the
visitor arrives at the page


Why not just use a list of regular links?

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 23 '05 #3

P: n/a
Yes, but that's not the effect my boss is looking for. I should have
been somewhat more explicit. He would like for the select to have all
the visible characteristics of an open dropdown, including the textbox
containing the currently selected value text and the down arrow to the
right of the textbox, and responding to a click as would an open
dropdown, closing and replacing the textbox contents with the new
selection.

In other words, he wants a regular dropdown-type select, but he wants it
to automatically open upon entry to the page. Theoretically, at least,
calling the select's Click() method from onLoad() should cause the
dropdown to open and await the user's selection. In the current
instance, this does not occur.

He just notified me that he had found a reference over on Expert's
Exchange which avers that what he wants cannot be done. Thank you very
much for your response.

Cheers,
Scott

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4

P: n/a
Well, these aren't links. This is kind of a Frankenapp; we are converting an
AS/400 5250 "green screen" application to a Web app. These selects usually
contain what would be "line options" in the 5250 version, such as "View
Errors," "Edit Details," etc. These commands are then sent back to the 400,
which generates the result page on the fly. Because the application has been
extant for a dozen or so years, and must continue to serve our customer base
(it's a large, 1500 screen IBM-hosted AS/400 EDI application), all of the
backend EDI stuff has to remain identical, while we wrestle with putting a
functioning Web interface on the app. With upwards of 1500 of the 5250
screens in the app to gen properly for the Web, this is a tad daunting.
Interesting, though...

Cheers,
Scott

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...
Prowler wrote:
In our current application we have a page whose sole purpose for
existence
is to permit the user to select from a list (subsequent to our login
page). We would like to have the list drop down automatically when the
visitor arrives at the page


Why not just use a list of regular links?

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 23 '05 #5

P: n/a
"Prowler" <eu*****@fuse.net> wrote in message
news:1110921578.a77ea601eca073cfc9b5ce596c86f0c2@t eranews...
Well, these aren't links. This is kind of a Frankenapp; we are converting an AS/400 5250 "green screen" application to a Web app. These selects usually
contain what would be "line options" in the 5250 version, such as "View
Errors," "Edit Details," etc. These commands are then sent back to the 400, which generates the result page on the fly. Because the application has been extant for a dozen or so years, and must continue to serve our customer base (it's a large, 1500 screen IBM-hosted AS/400 EDI application), all of the
backend EDI stuff has to remain identical, while we wrestle with putting a
functioning Web interface on the app. With upwards of 1500 of the 5250
screens in the app to gen properly for the Web, this is a tad daunting.
Interesting, though...

Cheers,
Scott


You might be interested in these:
Jacada
IBM Webfacing Tool
Websphere HATS
Jul 23 '05 #6

P: n/a
Lee
Prowler said:

Well, these aren't links. This is kind of a Frankenapp; we are converting an
AS/400 5250 "green screen" application to a Web app. These selects usually
contain what would be "line options" in the 5250 version, such as "View
Errors," "Edit Details," etc. These commands are then sent back to the 400,
which generates the result page on the fly. Because the application has been
extant for a dozen or so years, and must continue to serve our customer base
(it's a large, 1500 screen IBM-hosted AS/400 EDI application), all of the
backend EDI stuff has to remain identical, while we wrestle with putting a
functioning Web interface on the app. With upwards of 1500 of the 5250
screens in the app to gen properly for the Web, this is a tad daunting.
Interesting, though...


If it's not too late, I would avoid the temptation (or even the
decree) to try to pervert the web controls to be "more like what
they're used to". That will surely cause trouble.

Before you know it, the users will all be more used to working
with web applications than with the 5250 interface, and will
begin to gripe about the non-standard controls.

And that's not even considering the maintenance headache.

Jul 23 '05 #7

P: n/a
Thanks, but that's out, as well. ;-)

The application is built with a Computer Associates CASE tool. In its life
this family of tools has been many things: Synon, Obsydian, COOL:Plex,
Advantage 2E, etc. CA developed an ancillary tool called Web Options which
is specifically built to use the models built in 2E, apply the rules in the
Web Options MLS (Markup Language Skeleton), along with any screen
customizations which may exist for a particular screen, and render the pages
from the *identical* data stream that flows to the 5250 terminals. We are
still struggling with the bugs in the tool itself, but we're committed to
its use in building this Web app.

Everyone in the office is fundamentally an AS/400 (now iSeries) person
except myself; I was brought on board for this project specifically because
I'm a PC and Web guy, and an MCP. I'm gradually learning to stumble around
in a 5250 session. Actually, I do pretty well now, mainly because my primary
needs are to be able to access the MLS templates to view/edit/regen them and
to be able to explore the application itself in a separate session, so that
I can compare the 5250 version to the Web version as I'm working on it. It's
different from anything else I've ever worked on, but it is pretty
interesting and engaging coming up with solutions to the issues occasioned
by the somewhat unique nature of the project. Makes the day go quickly. ;-)

Cheers,
Scott

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:cs********************@comcast.com...
"Prowler" <eu*****@fuse.net> wrote in message
news:1110921578.a77ea601eca073cfc9b5ce596c86f0c2@t eranews...
Well, these aren't links. This is kind of a Frankenapp; we are converting

an
AS/400 5250 "green screen" application to a Web app. These selects
usually
contain what would be "line options" in the 5250 version, such as "View
Errors," "Edit Details," etc. These commands are then sent back to the

400,
which generates the result page on the fly. Because the application has

been
extant for a dozen or so years, and must continue to serve our customer

base
(it's a large, 1500 screen IBM-hosted AS/400 EDI application), all of the
backend EDI stuff has to remain identical, while we wrestle with putting
a
functioning Web interface on the app. With upwards of 1500 of the 5250
screens in the app to gen properly for the Web, this is a tad daunting.
Interesting, though...

Cheers,
Scott


You might be interested in these:
Jacada
IBM Webfacing Tool
Websphere HATS

Jul 23 '05 #8

P: n/a
Prowler wrote:
Well, these aren't links. This is kind of a Frankenapp; we are converting an
AS/400 5250 "green screen" application to a Web app. These selects usually
contain what would be "line options" in the 5250 version, such as "View
Errors," "Edit Details," etc. These commands are then sent back to the 400,
which generates the result page on the fly. Because the application has been
extant for a dozen or so years, and must continue to serve our customer base
(it's a large, 1500 screen IBM-hosted AS/400 EDI application), all of the
backend EDI stuff has to remain identical, while we wrestle with putting a
functioning Web interface on the app. With upwards of 1500 of the 5250
screens in the app to gen properly for the Web, this is a tad daunting.
Interesting, though...


The convention here is not to top post and to trim quoted text.

The only way you will get this is via DHTML. Below is a simple
example, it is intolerant of older browsers but works fine with
recent versions of Firefox or IE - it only requires basic DOM
compliance.

As Lee said, attempting to make controls do things they aren't
intended to will result in either disappointment or a maintenance
nightmare - likely both.

Below is some code that you may be able to use as a substitute
for some option lists, use styles modify the UI and add your
'down arrow' if required.

I've made it so you can have multiple selections, if you like,
replace the textarea with a text input and just replace the
value rather than (conditionally) append to it.

One consequence of having the drop-down open is that any text or
UI item underneath it is obscured until a selection is made.

You may also want to browse Matt Kruze's site for some things
you can do with option lists and text areas.

<URL:http://www.mattkruse.com/javascript/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title> Date Stuff </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..optOut, .optOver {
font-family: sans-serif; color: #333366;
background-color: white; padding: 1px 0 0 3px;}
..optOver {background-color: #ccccff;}
..box {border:2px inset #999999; z-index: 100;
position: absolute; top: 0em; width: 10em;}
..cell {width: 10em;}
</style>
<script type="text/javascript">
// Array of options. This format is easier to use
/* var opt = [];
opt[0] = 'option 0';
opt[1] = 'option 1';
opt[2] = 'option 2';
opt[3] = 'option 3';
opt[4] = 'option 4';
*/
// But this format is more concise and likely faster
// to initialise
var opt = [
'Option 0','Option 1','Edit details','View errors','Option 4',
'Option 5','Option 6','Option 7','Option 8'
];
function buildOptList(x) {
// Build the option list
var d = document.getElementById(x);
var i = opt.length;
while (i--) {
var oDiv = document.createElement('div');
oDiv.id = 'opt-' + i;
oDiv.className = 'optOut';
oDiv.onmouseover = function () {
this.className = 'optOver' };
oDiv.onmouseout = function () {
this.className = 'optOut' };
oDiv.onclick = function () {
addOption(this,'optionsSelected')};
oDiv.appendChild(document.createTextNode(opt[i]));
d.insertBefore(oDiv, d.firstChild);
}
}

function addOption(x,s){
// If this is the only visible option, show rest of list
// Otherwise, add this value to list
// and hide all other options
var xP = x.parentNode;
while (!/div/i.test(xP.nodeName)) {
xP = xP.parentNode;
}

// If just opening list, do nothing
if (toggleOpts(xP,x)) {
return;
}

/*
// If replacing the value, use this:
document.forms['Selections'].elements[s].value =
x.firstChild.data;

// And close function here
}
*/

// Otherwise, add selected option to textarea
var sel = x.firstChild.data;
var tgt = document.forms['Selections'].elements[s];

// Only add if not there already
if (!tgt.value.match(sel)) {
// Prepend newline if textarea value is empty
(tgt.value)? tgt.value += '\n' + sel : tgt.value += sel;
}
}

function toggleOpts(p,c){
// Shows/hides all the child divs of 'p'
// Does not hide current div 'c'
var x = p.getElementsByTagName('div');
var open = false;
var i = x.length;
var n;

while (i--) {
n = x[i];
if (n != c) {
if (n.style.display == 'none') {
// If 'dropping down' options, open is true
open = true;
n.style.display = '';
} else {
n.style.display = 'none';
}
}
}
// If closing up options, open stays false
return open;
}
</script>
</head>
<body>
<table border="0">
<tr><td class="cell" valign="top">
<p>Select an option</p><div style="position: relative;">
<div id="optList_01" class="box"></div>
</div>
</td><td valign="top">
<div style="padding-top: 6em;">-->></div>
</td><td valign="top">
<form action="" name="Selections">
<p>Selected options</p><div>
<textarea name="optionsSelected"
id="selectedOptions"
cols="20" rows="5"></textarea><br>
<input type="reset"></div>
</form>
</td></tr></table>
<p>Here is some more text that is hidden when
the options are open</p>
<script type="text/javascript">
buildOptList('optList_01');
</script>
</body>
</html>

--
Rob
Jul 23 '05 #9

P: n/a
Scott Glasgow wrote:
Thanks, Rob. I wasn't aware of the "no top post" convention (which I
admit to finding unusual). However, I am using the Developersdex Web
interface to respond to these messages, and it does not appear to offer
me a way either to control whether or not my response is top posted or
how much if anything is trimmed from my message.
To which the standard response is 'get a real news reader'
which, apparently, you've chosen to do (though some here may
quibble over whether OE is such a thing)! :-)

As I mentioned in an earlier response, we had determined that this
auto-dropdown could not be accomplished via use of any switch,
attribute, property, or method of the Select control and have decided
that extraordinary means to accomplish what is, after all, a minor
behavior modification (one which is also non-standard, as you point out)
were uncalled for.
Good decision. Part of the reason for the response was to
illustrate the interface clunkiness caused by using DHTML to
emulate standard HTML elements. I tolerate the use of DHTML
menus, but only just.

Thank you for your detailed response. I think I'll start using OE to
respond rather than go through Developersdex, in order to be able to
trim, bottom post, etc.


No problem! :-p

--
Rob
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.