SelectOverflow: Mootools Plugin for long select tags

This plugin replaces long selects with a text input that acts like a select (and can be styled like one too). Compatible with Mootools 1.22.


Selectoverflow.js is available from the Copix framework repository.

Using the plugin:

  1. Link to mootools and the plugin file in the <head> of your document.
  2. When the DOM is ready, call new SelectOverflow('MyLongSelectID');
  3. Style span.selectoverflow input to look like a select.


You can pass an object containing properties for the text input as the 2nd parameter. Usefull to add a class to it for instance.

Code examples

Adding links to the head

<script type="text/javascript" src="/js/mootools.js"></script><script type="text/javascript" src="/js/plugins/selectoverflow.js"></script>

Turning regular selects into SelectOverflow

window.addEvent('domready', function(){ new SelectOverflow('select1'); var select2 = $('select2'); // do something to select2... new SelectOverflow(select2); new SelectOverflow('otherLongSelect', {'class':'text'}); // input will have class="text"});

Styling the selects

<style type="text/css">select { width: 115px;} /* The normal selects */span.selectoverflow select {width: auto;} /* The repositionned selects */span.selectoverflow input {} /* the text inputs */</style>

Demo (added August 18, 2009)

See the results for yourself on the Mootools SelectOverflow Demo.

2 réflexions au sujet de « SelectOverflow: Mootools Plugin for long select tags »

Les commentaires sont fermés.