Prevent select's dropdown list from being rendered

relaxedrob · Mar 27, 2005

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

RobG · Mar 27, 2005

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?

How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Multi select options in a menu	1	Oct 30, 2022
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
Get value from dropdown javascript	1	Feb 11, 2012
I dont get this. Please help me!!	2	Jan 24, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

Prevent select's dropdown list from being rendered

relaxedrob

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads