Jquery: Multi Column Select Box

This quick tutorial assumes that you already have jquery.js setup. Here are the instructions:

1. Create a div with a table name the identify the div with a class “ex. datatable”

   <table cellspacing="0" width="100%">
   <tr>
   <td>1234</td><td>Apple</td>
   </tr>
   <tr>
   <td>1111</td><td>Cat</td>
   </tr>
   <tr>
   <td>5555</td><td>Dog</td>
   </tr>
   </table>

2. Include of course jquery.js and jquery.multicolselect.js
3. Put this as javascript

   $('.datatable').multicolselect({
      buttonImage:"selectbutton.gif",
      selectedID:"test2",
      eqVisible:1,
      eqHidden:0
   });

4. Note you need the “selectbutton.gif”. You can get a screenshot of the original Windows dropdown and then use Photoshop to crop it and save it as selectbutton.gif
5. Then your done.

Thanks to Jack for this tutorial. He found it here.

Browse Timeline

• « jQuery: The Ultimate Handbook.
• » Typechart: Fonts for web + CSS

Comments ( 3 )

Add a Comment