A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

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.

This entry was posted in General and tagged , . Bookmark the permalink.

3 Responses to Jquery: Multi Column Select Box

  1. redsquare says:

    Why no links to the plugin code or a demo??

  2. Wenbert says:

    @redsquare, I haven’t found the time yet. I am still at work — I will probably come up with something when I’m at home. ;)

    But to give you an idea, it is just like a dropdown menu, but with 2 columns.

    UPDATE: I have updated the jquerymulticolselect.js to link to the JS file.

Leave a Reply to Wenbert Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>