How to invoke a combo box event?

SilverStray · Jul 13, 2003

Hi,

Instead of clicking over the combo box to see the drop down list, i want to simulate the dropping down of the list programmatically. How can I do this? Is there a way of invoking the function for MouseDown or on Click within my Javascript code? So instead of waiting for the event to occur (such as onClick or onMouseDown), what i want to do is to invoke that event.

I hope somebody out there can help!

Thanks in advance!

clarkin · Jul 13, 2003

you should be able to simulate an event by directly calling it..

so, simplified:
[tt]
<select name="MySelect">
<option>..etc
</select>

<script>
MySelect.click();
</script>
[/tt]

for a full list of events and event handlers (the onBlah), check out

http://members.ozemail.com.au/~dcrombie/javascript/chap07.html

SilverStray · Jul 13, 2003

Hi,

Thanks for your reply. I tried it right away. But the click function doesn't seem to work. The 'click' event didn't cause the SELECT list to drop down.

I did something like this where I have a mySelect drop down list.

<input type="button" name="testbtn" value="Test" onClick="form1.mySelect.change();">

I tried putting the other functions like select(), change(), but the error I get is: 'Object doesn't support this property or method.'

dwarfthrower · Jul 13, 2003

If I'm reading this right, what you want is for your list to drop down when the user mouses over the control rather than when they click the little triangle. Right in my interpretation?

If so, there is a way to do this. Select boxes are treated as system controls for the presentation aspect, meaning that we cannot (using script) tell the combo box to drop it's choices down on command.

What we can do is change the combo box to a list on the mouse over event as so:

Code:

<select size=&quot;1&quot; id=&quot;select1&quot; onMouseOver=&quot;this.size=this.options.length;&quot; onMouseOut=&quot;this.size=1;&quot;>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

clarkin · Jul 13, 2003

hi,

I created a little tester .htm page for this, code below:
[tt]
<html>
<head>
<title>select event simulation</title>
</head>
<body>
<form name="form1">
<select name="MySelect" size="1">
<option selected value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br />
<input type="button" name="button1" value="focus( )" onClick="MySelect.focus();">
<input type="button" name="button2" value="click( )" onClick="MySelect.click();">
<input type="button" name="button3" value="selectedIndex=1" onClick="MySelect.selectedIndex=1;">
<input type="button" name="button4" value="selectedIndex=2" onClick="MySelect.selectedIndex=2;">
</form>
</body>
</html>
[/tt]

try this for the various options. [tt]MySelect.click();[/tt] runs alright, but unfortunately doesn't expand the select box. Doesn't look like there is a way to do this atm either.. you can however make a selection by changing the selectedIndex (note 0 is first choice) of the select.

g'luck

dwarfthrower · Jul 13, 2003

Doesn't look like there is a way to do this atm either

As outlined above, the only way to expand the list programatically is by manipulating the

Code:

size

attribute.

clarkin · Jul 13, 2003

yep, guess you're right dwarfthrower: the only problem is changing the size attribute of the select box can throw off your entire page around the box: instead of the list dropdown appearing above the rest of the page it appears _IN_ the page, which could affect stuff in a carefully formatted page.

Just for original poster's info.

good luck, let us know if you were able to use anything

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to invoke a combo box event?

SilverStray

Programmer

clarkin

Programmer

SilverStray

Programmer

dwarfthrower

Programmer

clarkin

Programmer

dwarfthrower

Programmer

clarkin

Programmer

Similar threads

Part and Inventory Search

Sponsor