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

Prevent select's dropdown list from being rendered

P: n/a
Hi All,

I want to write a select control and use a Javascript function to
handle all click events on the control. Under certain circumstances I
also wish to prevent the dropdown's list from being rendered.

Here is a sample showing what I am _unsuccessfully_ trying to do. :-/

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function selectOnclick(e) {
// e gives access to the event in all browser
if (!e) var e = window.event;
if (e) { e.cancelBubble = true; }
return false;
}
</script>
</head><body>
<form name="test">
<select name="select" onmousedown="selectOnclick();">
<option value="one">one</option>
</select>
</form>
<script type="text/javascript">
document.test.select.onmousedown = selectOnclick;
</script>
</body>
</html>

Any advice would be most appreciated!

Rob
:)
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
re********@optushome.com.au wrote:
Hi All,

I want to write a select control and use a Javascript function to
handle all click events on the control. Under certain circumstances I
also wish to prevent the dropdown's list from being rendered.
I don't think you can do this. The only thing I can think of is to
disable/re-enable the control, but you have to re-enable it from a
separate function using setTimeout().

I've added a few comments on your code too.

Here is a sample showing what I am _unsuccessfully_ trying to do. :-/

Please don't use tabs in code, indent by 2 or 4 spaces and replace
tabs with spaces. Then manually wrap at say 70 characters.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function selectOnclick(e) {
// e gives access to the event in all browser
if (!e) var e = window.event;
e = e || window.event;

will do just as well. But you haven't passed event from the
onmousedown anyway.
if (e) { e.cancelBubble = true; }
This will only cancel the event in IE, it has no effect in other
browsers. To add canceling for other browsers, add:

e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
return false;
}
</script>
</head><body>
<form name="test">
<select name="select" onmousedown="selectOnclick();">
Need to pass event to the function, disable, etc.:

<select name="select" onmousedown="
this.disabled = true;
selectOnclick(event);
alert('hi');
setTimeout('enableThis()',10);
">

If you comment out the alert, you won't even see the select
disable/renable, it just refuses to drop down the option.
<option value="one">one</option>
</select>
</form>
<script type="text/javascript">
document.test.select.onmousedown = selectOnclick;
Why add the function a second time? This will overwrite the
onmousedown on the element so remove it. I put my re-enable function
here but you could add it elsewhere:

function enableThis(){
document.forms['test'].elements['select'].disabled = false;
}
</script>


Having done the above, you don't need to cancel the event if the
purpose was only to stop the drop-down.

I'm not sure doing this at all is a good idea, playing with the user
interface just annoys users. Is there no other way to do what you
are trying to achieve?

--
Rob
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.