/    Sign up×
Community /Pin to ProfileBookmark

possible to automatically open pulldown menus?

Copy linkTweet thisAlerts:
Jan 12.2005

Hi! I’m working on some scripts that affect pulldown menus, and our customer has a quite unusual request. The customer wants a script to automatically open a pulldown menu when some actions occur, i.e. simulate that the user has just clicked on the menu. Based on the javascript spec I have been looking at ([URL=http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/]http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/[/URL] -> “Select Object”), this doesn’t seem possible. But still I’m wondering if anyone here knows a way to do this.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@chrizJan 12.2005 — ...so when a certain button is clicked, adifferent option in the pull-down menu is selected?
Copy linkTweet thisAlerts:
@scragarJan 12.2005 — I think he just wants it to get focus, or maybe he's after the dropdown droping down...

in which case obj.focus(); gets focus but theres nothing you can do to make it dropdown.
Copy linkTweet thisAlerts:
@chrizJan 12.2005 — unless you click on it but he dosn't want that
Copy linkTweet thisAlerts:
@KalifenauthorJan 12.2005 — [i]Originally posted by scragar [/i]

[B]I think he just wants it to get focus, or maybe he's after the dropdown droping down...



in which case obj.focus(); gets focus but theres nothing you can do to make it dropdown. [/B][/QUOTE]

Yeah, I was looking for some kind of automatic dropdown.

Well, thanks for your answers, guys!
Copy linkTweet thisAlerts:
@pj59Jan 12.2005 — Hello!

The code below does not actually drop down the select, but as far as I know, a simulation of an automatic drop down cannot get much closer:[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript" type="text/javascript">
<!--
var blah=0;
//-->
</script>
</head>
<body>
<form name="myForm">
<div style="position: absolute;top:20px;">
Click the button to open or close the select: <input name="btn" type="button" value="&quot;Open&quot;" onclick="if(blah==0){this.form.sel.size=(this.form.sel.size==6)?'':6;this.value=(this.value=='&quot;Open&quot;')?'&quot;Close&quot;':'&quot;Open&quot;'}"><br>
Please note: elements will have to be absolutely positioned to avoid "jumping".
</div>
<select name="sel" style="position:absolute;top:90px;" onfocus="blah=5" onblur="blah=0" onclick="if(this.form.btn.value=='&quot;Close&quot;')this.form.btn.value='&quot;Open&quot;';this.size=''" onchange="blah=0;this.form.btn.value='&quot;Open&quot;';this.size=''">
<option>---select---</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
<option>option 7</option>
<option>option 8</option>
<option>option 9</option>
<option>option 10</option>
</select><br>
<input style="position:absolute;top:120px;">
</form>
</body>
</html>[/code]Maybe, your customer will be more satisfied with this workaround than without.

Regards PJ

Oops: forgot to mention that the collection of event handlers is just meant as a basis for playing with. If I knew, what the customer really wants (and why), the stuff disturbing the normal functionality could be modified. Sorry for that. :p
Copy linkTweet thisAlerts:
@KalifenauthorJan 12.2005 — Excellent, PJ! This really should be good enough ?
Copy linkTweet thisAlerts:
@pj59Jan 12.2005 — Thanks!

You should not implement that stuff like it is without knowing everything it does. Play with the onclick in the select tag and you will know what I mean. My example being used in practice, maybe it is better to take that one out or modify it.

PJ
Copy linkTweet thisAlerts:
@Warren86Jan 12.2005 — <HTML>

<Head>

<Script Language=JavaScript>

function openSelect(){

isList = document.forms['testForm'].mySelect;
isList.focus();
isList.size = isList.length;
}

function getValue(isVal){

alert(isVal);
isList = document.forms['testForm'].mySelect;
isList.size = 1;

}

window.onload=openSelect;

</Script>

</Head>

<Body>

<Form name='testForm'>

<Select name='mySelect' onchange="getValue(this.value)">

<option selected value=""> Choose A Country </option>

<option value='India'> India </option>

<option value='China'> China </option>

<option value='Japan'> Japan </option>

</select>

</Form>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@pj59Jan 12.2005 — Yes, that obviously makes sense! :p[code=php]<HTML>
<Head>
<Script Language=JavaScript>

function openSelect(){

isList = document.forms['testForm'].mySelect;
isList.focus();
isList.size = isList.length;
}

window.onload=openSelect;


</Script>
</Head>
<Body>
<Form name='testForm'>
<Select name='mySelect'>
<option selected value=""> Choose A Country </option>
<script language="JavaScript" type="text/javascript">
<!--
for (var i=1;i<87;i++){
document.write('<option value="'+i+'">option '+i+'</option>'+"n");
}
document.close();
//-->
</script>
</select><br>
Some very important text and the submit button here.
</Form>
</Body>
</HTML>[/code]PJ :rolleyes:
×

Success!

Help @Kalifen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...