I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).

As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?

I'm having a few problems creating a multiple select checkbox list that appears when a user clicks a select field (I use the onfocus event).

As far as showing the list, that's fine, however how can one prevent the actual select field from showing a dropdown using javascript?

• javascript
• jquery
• html

• ok, I haven't tried this - but what happens if you set the SelectedIndex to -1 or something as soon as you enter the onfocus event handler ? – Dave Long Commented Jul 13, 2011 at 20:34
• Not sure if that's possible in all browsers, or possible at all. You could also set the z-index of the checkbox list to some high value so that it appears over the select list (if that helps). – pimvdb Commented Jul 13, 2011 at 20:36
• how about addEventListener click , event.preventDefault() and then display your form ? – Anil Shanbhag Commented Jul 13, 2011 at 20:39

4 Answers 4

Why not! :)

DEMO

$('.sel').focus(function() {
    this.blur();
    window.focus();
    $('.dropdown').fadeToggle(300);
});

Here is the solution I use to customize the appearance of my select and fileupload controls:

1. give your element (select) opacity:0.1 either by css or jQuery fadeTo() function
2. wrap your element with a container div and give it position:relative.
3. add a sibling (drop panel) to the element and give it position:absolute, top:, left:0 and width equal to the width of element.
4. show the drop panel using jQuery in $(select).click() event.

may seem weird, but works cross browser :)

Haven't tried to suppress the select dropdown, but if all else fails you can just create a custom form element. Such as:

<dl>
<dt>Please select an option</dt> <!-- Text -->
<dd> </dd> <!-- Style as downward arrow -->
</dl>
<input type="hidden" name="custom_select_value" value="selected option" />

Style the DL (or which ever markup you wish) to look like a select element, then use a click handler to bring down your multi-option box. Also populate the hidden input with JS when an option is selected to ensure the data is submitted with the form.

I needed a similar UX, so I created this:

harshniketseta.github.io/popupMultiSelect

Hope this helps you.