application/media/js/jquery.selectboxes.min.js

   1 /*
   2  *
   3  * Copyright (c) 2006-2008 Sam Collett (http://www.texotela.co.uk)
   4  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
   5  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
   6  *
   7  * Version 2.2.3
   8  * Demo: http://www.texotela.co.uk/code/jquery/select/
   9  *
  10  * $LastChangedDate$
  11  * $Rev$
  12  *
  13  */
  14
  15 ;(function($) {
  16
  17 /**
  18  * Adds (single/multiple) options to a select box (or series of select boxes)
  19  *
  20  * @name     addOption
  21  * @author   Sam Collett (http://www.texotela.co.uk)
  22  * @type     jQuery
  23  * @example  $("#myselect").addOption("Value", "Text"); // add single value (will be selected)
  24  * @example  $("#myselect").addOption("Value 2", "Text 2", false); // add single value (won't be selected)
  25  * @example  $("#myselect").addOption({"foo":"bar","bar":"baz"}, false); // add multiple values, but don't select
  26  *
  27  */
  28 $.fn.addOption = function()
  29 {
  30         var add = function(el, v, t, sO)
  31         {
  32                 var option = document.createElement("option");
  33                 option.value = v;
  34                 option.text = t;
  35                 el.add(option);
  36                 if(sO)
  37                 {
  38                         option.selected = true;
  39                 }
  40         };
  41
  42         var a = arguments;
  43         if(a.length == 0) return this;
  44         // select option when added? default is true
  45         var sO = true;
  46         // multiple items
  47         var m = false;
  48         // other variables
  49         var items, v, t;
  50         if(typeof(a[0]) == "object")
  51         {
  52                 m = true;
  53                 items = a[0];
  54         }
  55         if(a.length >= 2)
  56         {
  57                 if(typeof(a[1]) == "boolean") sO = a[1];
  58                 else if(typeof(a[2]) == "boolean") sO = a[2];
  59                 if(!m)
  60                 {
  61                         v = a[0];
  62                         t = a[1];
  63                 }
  64         }
  65         this.each(
  66                 function()
  67                 {
  68                         if(this.nodeName.toLowerCase() != "select") return;
  69                         if(m)
  70                         {
  71                                 for(var item in items)
  72                                 {
  73                                         add(this, item, items[item], sO);
  74                                 }
  75                         }
  76                         else
  77                         {
  78                                 add(this, v, t, sO);
  79                         }
  80                 }
  81         );
  82         return this;
  83 };
  84
  85 /**
  86  * Add options via ajax
  87  *
  88  * @name     ajaxAddOption
  89  * @author   Sam Collett (http://www.texotela.co.uk)
  90  * @type     jQuery
  91  * @param    String url      Page to get options from (must be valid JSON)
  92  * @param    Object params   (optional) Any parameters to send with the request
  93  * @param    Boolean select  (optional) Select the added options, default true
  94  * @param    Function fn     (optional) Call this function with the select object as param after completion
  95  * @param    Array args      (optional) Array with params to pass to the function afterwards
  96  * @example  $("#myselect").ajaxAddOption("myoptions.php");
  97  * @example  $("#myselect").ajaxAddOption("myoptions.php", {"code" : "007"});
  98  * @example  $("#myselect").ajaxAddOption("myoptions.php", {"code" : "007"}, false, sortoptions, [{"dir": "desc"}]);
  99  *
 100  */
 101 $.fn.ajaxAddOption = function(url, params, select, fn, args)
 102 {
 103         if(typeof(url) != "string") return this;
 104         if(typeof(params) != "object") params = {};
 105         if(typeof(select) != "boolean") select = true;
 106         this.each(
 107                 function()
 108                 {
 109                         var el = this;
 110                         $.getJSON(url,
 111                                 params,
 112                                 function(r)
 113                                 {
 114                                         $(el).addOption(r, select);
 115                                         if(typeof fn == "function")
 116                                         {
 117                                                 if(typeof args == "object")
 118                                                 {
 119                                                         fn.apply(el, args);
 120                                                 }
 121                                                 else
 122                                                 {
 123                                                         fn.call(el);
 124                                                 }
 125                                         }
 126                                 }
 127                         );
 128                 }
 129         );
 130         return this;
 131 };
 132
 133 /**
 134  * Removes an option (by value or index) from a select box (or series of select boxes)
 135  *
 136  * @name     removeOption
 137  * @author   Sam Collett (http://www.texotela.co.uk)
 138  * @type     jQuery
 139  * @param    String|RegExp|Number what  Option to remove
 140  * @param    Boolean selectedOnly       (optional) Remove only if it has been selected (default false)
 141  * @example  $("#myselect").removeOption("Value"); // remove by value
 142  * @example  $("#myselect").removeOption(/^val/i); // remove options with a value starting with 'val'
 143  * @example  $("#myselect").removeOption(/./); // remove all options
 144  * @example  $("#myselect").removeOption(/./, true); // remove all options that have been selected
 145  * @example  $("#myselect").removeOption(0); // remove by index
 146  * @example  $("#myselect").removeOption(["myselect_1","myselect_2"]); // values contained in passed array
 147  *
 148  */
 149 $.fn.removeOption = function()
 150 {
 151         var a = arguments;
 152         if(a.length == 0) return this;
 153         var ta = typeof(a[0]);
 154         var v, index;
 155         // has to be a string or regular expression (object in IE, function in Firefox)
 156         if(ta == "string" || ta == "object" || ta == "function" )
 157         {
 158                 v = a[0];
 159                 // if an array, remove items
 160                 if(v.constructor == Array)
 161                 {
 162                         var l = v.length;
 163                         for(var i = 0; i<l; i++)
 164                         {
 165                                 this.removeOption(v[i], a[1]);
 166                         }
 167                         return this;
 168                 }
 169         }
 170         else if(ta == "number") index = a[0];
 171         else return this;
 172         this.each(
 173                 function()
 174                 {
 175                         if(this.nodeName.toLowerCase() != "select") return;
 176                         // does the option need to be removed?
 177                         var remove = false;
 178                         // get options
 179                         var o = this.options;
 180                         if(!!v)
 181                         {
 182                                 // get number of options
 183                                 var oL = o.length;
 184                                 for(var i=oL-1; i>=0; i--)
 185                                 {
 186                                         if(v.constructor == RegExp)
 187                                         {
 188                                                 if(o[i].value.match(v))
 189                                                 {
 190                                                         remove = true;
 191                                                 }
 192                                         }
 193                                         else if(o[i].value == v)
 194                                         {
 195                                                 remove = true;
 196                                         }
 197                                         // if the option is only to be removed if selected
 198                                         if(remove && a[1] === true) remove = o[i].selected;
 199                                         if(remove)
 200                                         {
 201                                                 o[i] = null;
 202                                         }
 203                                         remove = false;
 204                                 }
 205                         }
 206                         else
 207                         {
 208                                 // only remove if selected?
 209                                 if(a[1] === true)
 210                                 {
 211                                         remove = o[index].selected;
 212                                 }
 213                                 else
 214                                 {
 215                                         remove = true;
 216                                 }
 217                                 if(remove)
 218                                 {
 219                                         this.remove(index);
 220                                 }
 221                         }
 222                 }
 223         );
 224         return this;
 225 };
 226
 227 /**
 228  * Sort options (ascending or descending) in a select box (or series of select boxes)
 229  *
 230  * @name     sortOptions
 231  * @author   Sam Collett (http://www.texotela.co.uk)
 232  * @type     jQuery
 233  * @param    Boolean ascending   (optional) Sort ascending (true/undefined), or descending (false)
 234  * @example  // ascending
 235  * $("#myselect").sortOptions(); // or $("#myselect").sortOptions(true);
 236  * @example  // descending
 237  * $("#myselect").sortOptions(false);
 238  *
 239  */
 240 $.fn.sortOptions = function(ascending)
 241 {
 242         var a = typeof(ascending) == "undefined" ? true : !!ascending;
 243         this.each(
 244                 function()
 245                 {
 246                         if(this.nodeName.toLowerCase() != "select") return;
 247                         // get options
 248                         var o = this.options;
 249                         // get number of options
 250                         var oL = o.length;
 251                         // create an array for sorting
 252                         var sA = [];
 253                         // loop through options, adding to sort array
 254                         for(var i = 0; i<oL; i++)
 255                         {
 256                                 sA[i] = {
 257                                         v: o[i].value,
 258                                         t: o[i].text
 259                                 }
 260                         }
 261                         // sort items in array
 262                         sA.sort(
 263                                 function(o1, o2)
 264                                 {
 265                                         // option text is made lowercase for case insensitive sorting
 266                                         o1t = o1.t.toLowerCase(), o2t = o2.t.toLowerCase();
 267                                         // if options are the same, no sorting is needed
 268                                         if(o1t == o2t) return 0;
 269                                         if(a)
 270                                         {
 271                                                 return o1t < o2t ? -1 : 1;
 272                                         }
 273                                         else
 274                                         {
 275                                                 return o1t > o2t ? -1 : 1;
 276                                         }
 277                                 }
 278                         );
 279                         // change the options to match the sort array
 280                         for(var i = 0; i<oL; i++)
 281                         {
 282                                 for (var j = i; j<oL; j++) {
 283                                         if (o[j].text == sA[i].t && o[j].value == sA[i].v) {
 284                                                 if (i != j)
 285                                                         $(o[i]).before(o[j]);
 286                                                 break;
 287                                         }
 288                                 }
 289                         }
 290                 }
 291         );
 292         return this;
 293 };
 294 /**
 295  * Selects an option by value
 296  *
 297  * @name     selectOptions
 298  * @author   Mathias Bank (http://www.mathias-bank.de), original function
 299  * @author   Sam Collett (http://www.texotela.co.uk), addition of regular expression matching
 300  * @type     jQuery
 301  * @param    String|RegExp value  Which options should be selected
 302  * can be a string or regular expression
 303  * @param    Boolean clear  Clear existing selected options, default false
 304  * @example  $("#myselect").selectOptions("val1"); // with the value 'val1'
 305  * @example  $("#myselect").selectOptions(/^val/i); // with the value starting with 'val', case insensitive
 306  *
 307  */
 308 $.fn.selectOptions = function(value, clear)
 309 {
 310         var v = value;
 311         var vT = typeof(value);
 312         var c = clear || false;
 313         // has to be a string or regular expression (object in IE, function in Firefox)
 314         if(vT != "string" && vT != "function" && vT != "object") return this;
 315         this.each(
 316                 function()
 317                 {
 318                         if(this.nodeName.toLowerCase() != "select") return this;
 319                         // get options
 320                         var o = this.options;
 321                         // get number of options
 322                         var oL = o.length;
 323                         for(var i = 0; i<oL; i++)
 324                         {
 325                                 if(v.constructor == RegExp)
 326                                 {
 327                                         if(o[i].value.match(v))
 328                                         {
 329                                                 o[i].selected = true;
 330                                         }
 331                                         else if(c)
 332                                         {
 333                                                 o[i].selected = false;
 334                                         }
 335                                 }
 336                                 else
 337                                 {
 338                                         if(o[i].value == v)
 339                                         {
 340                                                 o[i].selected = true;
 341                                         }
 342                                         else if(c)
 343                                         {
 344                                                 o[i].selected = false;
 345                                         }
 346                                 }
 347                         }
 348                 }
 349         );
 350         return this;
 351 };
 352
 353 /**
 354  * Copy options to another select
 355  *
 356  * @name     copyOptions
 357  * @author   Sam Collett (http://www.texotela.co.uk)
 358  * @type     jQuery
 359  * @param    String to  Element to copy to
 360  * @param    String which  (optional) Specifies which options should be copied - 'all' or 'selected'. Default is 'selected'
 361  * @example  $("#myselect").copyOptions("#myselect2"); // copy selected options from 'myselect' to 'myselect2'
 362  * @example  $("#myselect").copyOptions("#myselect2","selected"); // same as above
 363  * @example  $("#myselect").copyOptions("#myselect2","all"); // copy all options from 'myselect' to 'myselect2'
 364  *
 365  */
 366 $.fn.copyOptions = function(to, which)
 367 {
 368         var w = which || "selected";
 369         if($(to).size() == 0) return this;
 370         this.each(
 371                 function()
 372                 {
 373                         if(this.nodeName.toLowerCase() != "select") return this;
 374                         // get options
 375                         var o = this.options;
 376                         // get number of options
 377                         var oL = o.length;
 378                         for(var i = 0; i<oL; i++)
 379                         {
 380                                 if(w == "all" ||        (w == "selected" && o[i].selected))
 381                                 {
 382                                         $(to).addOption(o[i].value, o[i].text);
 383                                 }
 384                         }
 385                 }
 386         );
 387         return this;
 388 };
 389
 390 /**
 391  * Checks if a select box has an option with the supplied value
 392  *
 393  * @name     containsOption
 394  * @author   Sam Collett (http://www.texotela.co.uk)
 395  * @type     Boolean|jQuery
 396  * @param    String|RegExp value  Which value to check for. Can be a string or regular expression
 397  * @param    Function fn          (optional) Function to apply if an option with the given value is found.
 398  * Use this if you don't want to break the chaining
 399  * @example  if($("#myselect").containsOption("val1")) alert("Has an option with the value 'val1'");
 400  * @example  if($("#myselect").containsOption(/^val/i)) alert("Has an option with the value starting with 'val'");
 401  * @example  $("#myselect").containsOption("val1", copyoption).doSomethingElseWithSelect(); // calls copyoption (user defined function) for any options found, chain is continued
 402  *
 403  */
 404 $.fn.containsOption = function(value, fn)
 405 {
 406         var found = false;
 407         var v = value;
 408         var vT = typeof(v);
 409         var fT = typeof(fn);
 410         // has to be a string or regular expression (object in IE, function in Firefox)
 411         if(vT != "string" && vT != "function" && vT != "object") return fT == "function" ? this: found;
 412         this.each(
 413                 function()
 414                 {
 415                         if(this.nodeName.toLowerCase() != "select") return this;
 416                         // option already found
 417                         if(found && fT != "function") return false;
 418                         // get options
 419                         var o = this.options;
 420                         // get number of options
 421                         var oL = o.length;
 422                         for(var i = 0; i<oL; i++)
 423                         {
 424                                 if(v.constructor == RegExp)
 425                                 {
 426                                         if (o[i].value.match(v))
 427                                         {
 428                                                 found = true;
 429                                                 if(fT == "function") fn.call(o[i], i);
 430                                         }
 431                                 }
 432                                 else
 433                                 {
 434                                         if (o[i].value == v)
 435                                         {
 436                                                 found = true;
 437                                                 if(fT == "function") fn.call(o[i], i);
 438                                         }
 439                                 }
 440                         }
 441                 }
 442         );
 443         return fT == "function" ? this : found;
 444 };
 445
 446 /**
 447  * Returns values which have been selected
 448  *
 449  * @name     selectedValues
 450  * @author   Sam Collett (http://www.texotela.co.uk)
 451  * @type     Array
 452  * @example  $("#myselect").selectedValues();
 453  *
 454  */
 455 $.fn.selectedValues = function()
 456 {
 457         var v = [];
 458         this.find("option:selected").each(
 459                 function()
 460                 {
 461                         v[v.length] = this.value;
 462                 }
 463         );
 464         return v;
 465 };
 466
 467 /**
 468  * Returns options which have been selected
 469  *
 470  * @name     selectedOptions
 471  * @author   Sam Collett (http://www.texotela.co.uk)
 472  * @type     jQuery
 473  * @example  $("#myselect").selectedOptions();
 474  *
 475  */
 476 $.fn.selectedOptions = function()
 477 {
 478         return this.find("option:selected");
 479 };
 480
 481 })(jQuery);