Is there any way to make it so a click on a select input field does not open the list of options?
I tried returning false from onmousedown and onclick, I tried calling this.blur() in onfocus, I tried setting the readonly attribute, none of this seems to work in Firefox.
Chrome and IE seem to take the "return false" in the mousedown handler more seriously.
EDIT: What I want to do is implement my own interface for choosing the option from the select input. Disabling the select both changes its appearance and prevents any events from firing on the control. Limiting to one option still makes that option open when the user clicks on the control, so it's not a good solution.
I guess I'll have to remove the select and try to create something that looks like it from a text box and an image.
Code (online here):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test searchable select</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#mys").mousedown(function () {
console.log("mousedown");
return false;
}).focus(function() {
console.log("focus");
this.blur();
});
});
</script>
<body>
<select style="width: 300px" id="mys" readonly="readonly">
<option>apple</option>
<option>banana</option>
</select>
</body>
</html>