Tuesday, December 05, 2006

Select dropdown options using jQuery

Finally an update to my Select box manipulation collection of plugins for jQuery. You can select options that match a given string or regular expression. The original code for this particular plugin was created by Mathias Bank, with a modification by me to use a regular expression as a parameter as well as a string. He wrote it over a month ago, but I have only just got round to implementing it.

Posted by Sam at 5:26 pm
Labels: ,

4 comments:

Oli said...

I was greatfully using your jquery-select extension in a web appication. However, I found an issue in Safari (2.0) which causes addOption to fail. The code at fault is:

this.options.add(option);

Changing it to:

this.options[this.length] = option;

works in Safari as well. Hope this helps!

Oli.

1:08 pm, February 01, 2007
Sam said...

Have updated the plugin, so it should hopefully work in Safari 2.0.

12:30 pm, February 02, 2007
Stefan - ZipKid - Goethals said...

hello,

This plugin is quit usefull. Thank you for it.
I needed to sort options after retrieving them via ajax. So i added an option to the ajaxAddOption function to call a function after completion.

Here is my change:

/**
* Add options via ajax
*
* @name     ajaxAddOption
* @author   Sam Collett ( http://www.texotela.co.uk )
* @type     jQuery
* @param    String url   Page to get options from ( must be valid JSON )
* @param    Object params    ( optional ) Any parameters to send with the request
* @param    Boolean select    ( optional ) Select the added options, default true
* @param    Function fn        ( optional ) call this function with the select object as param after completion
* @example  $ ( "#myselect" ) .ajaxAddOption ( "myoptions.php" ) ;
*
*/
$.fn.ajaxAddOption = function ( url, params, select, fn )
{
    if ( typeof url != "string" ) return this;
    if ( typeof params != "object" ) params = { } ;
    if ( typeof select != "boolean" ) select = true;
    this.each (
        function ( )
         {
            var self = this;
            $.getJSON ( url,
                params,
                function ( r )
                 {
                    $ ( self ) .addOption ( r, select ) ;
                    if ( typeof fn == "function" ) fn.call ( self ) ;
                 }
             ) ;
         }
     )
    return this;
}

7:21 pm, March 20, 2007
Stefan - ZipKid - Goethals said...

Another addition, parameters for the function.

/**
* Add options via ajax
*
* @name     ajaxAddOption
* @author   Sam Collett ( http://www.texotela.co.uk )
* @type     jQuery
* @param    String url   Page to get options from ( must be valid JSON )
* @param    Object params    ( optional ) Any parameters to send with the request
* @param    Boolean select    ( optional ) Select the added options, default true
* @param    Function fn        ( optional ) call this function with the select object as param after completion
* @param    Array args          ( optional ) array with params to pass to the function afterwards
* @example  $ ( "#myselect" ) .ajaxAddOption ( "myoptions.php" ) ;
*
*/
$.fn.ajaxAddOption = function ( url, params, select, fn, args )
{
    if ( typeof url != "string" ) return this;
    if ( typeof params != "object" ) params = { } ;
    if ( typeof select != "boolean" ) select = true;
    this.each (
        function ( )
         {
            var self = this;
            $.getJSON ( url,
                params,
                function ( r )
                 {
                    $ ( self ) .addOption ( r, select ) ;
                    if ( typeof fn == "function" ) {
                        alert ( typeof args ) ;
                        if ( typeof args == "object" ) {
                            fn.apply ( self, args ) ;
                         } else {
                            fn.call ( self ) ;
                         }
                     }
                 }
             ) ;
         }
     )
    return this;
}

7:36 pm, March 20, 2007

Post a Comment