<select> element and observe('click') on options to toggle option.selected

I’ve seen a few examples using jQuery that do what I want, but I’m developing a plugin for an application that uses the Prototype framework and would like to stick to that.

Basically, I want the functionality as if the ctrl key was always pressed. If a selected option is clicked, I want it to de-select.

  • How to tell when dom-repeat is done stamping elements
  • Best way to hide a button on an HTML page with Javascript
  • Rhino and DOM support
  • Is innerHTML asynchronous?
  • Hom much memory does a Jquery Element Reference Take Up?
  • Will inserting the same `<script>` into the DOM twice cause a second request in any browsers?
  • Here’s an example I found using jQuery: http://jsbin.com/idofa

    Here’s my version that doesn’t work, because the event fires after the default action selects it (which results in it selecting and then immediately being unselected).

    option.observe('click', function(event){
        this.selected = !this.selected;

    I have tried adding event.stop(); and event.preventDefault(); neither of which seem to have an effect.


  • Uncaught TypeError: Cannot call method 'addEventListener' of undefined
  • Ensuring no memory leaks in backbonejs app
  • iPad safari don't show loaded images until slide the screen
  • Why don't document.getElementsBy__ methods return an HTMLCollection?
  • Select Element By CSS style (all with given style)
  • Why isn't there a document.createHTMLNode()?
  • One Solution collect form web for “<select> element and observe('click') on options to toggle option.selected”

    Proper answer, from comment I made above:

    Selection is performed on mousedown, so 'mousedown' event has to be used instead of 'click' here.

    option.observe('mousedown', function (event) {
        this.selected = !this.selected;
        event.stop();    // unnecessary in this case, but I think it's good practice

    Example on a fiddle, edited by Victor: