469,588 Members | 2,766 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,588 developers. It's quick & easy.

Sorting options through Javascript

Hi,

I want to filter and sort my optionlists.

I tried to put the options in a variabel and know it is an object and actually I want it in an array, because as soon it is in an array I can sort and filter it.

Expand|Select|Wrap|Line Numbers
  1. oToSortOptions = document.forms[0].selectId.options;
  2. alert( oToSortOptions);
  3.  
The alert let me know Iv got a object, but I want the array.

Myself think it must be very simple
ScubaDo
Dec 8 '07 #1
2 1144
Logician
210 100+
Hi,

I want to filter and sort my optionlists.

I tried to put the options in a variabel and know it is an object and actually I want it in an array, because as soon it is in an array I can sort and filter it.

Expand|Select|Wrap|Line Numbers
  1. oToSortOptions = document.forms[0].selectId.options;
  2. alert( oToSortOptions);
  3.  
The alert let me know Iv got a object, but I want the array.
Other than applying a sort function to the options, the only way I know is to copy the text properties into an array, sort the array, then create a new set of options using the original options to associate the sorted .text properties with the original .value properties.
Finally copy the new options into the select element.

Here are two select sort functions with the same functionality. The first performs a bubblesort, the second (recommended) uses the above algorithm.
Expand|Select|Wrap|Line Numbers
  1. function selectSort(box)
  2. {
  3.  var didSwap=true, tmp={}, v=box.options,
  4.      currSelText=(box.selectedIndex==-1?"":box[box.selectedIndex].text);
  5.  
  6.  while(didSwap)
  7.   for(var i=0, didSwap=false, len=v.length-1; i<len; i++)
  8.    if(v[i].text > v[i+1].text)
  9.    {
  10.     tmp.opt=v[i];
  11.     tmp.dis=tmp.opt.disabled;
  12.     v[i]=new Option(v[i+1].text, v[i+1].value);
  13.     v[i].disabled=v[i+1].disabled;
  14.     v[i+1]=new Option(tmp.opt.text, tmp.opt.value);
  15.     v[i+1].disabled=tmp.dis;
  16.     didSwap=true;
  17.    } 
  18.  
  19.  for(var i=0, len=v.length; i<len && v[i].text!=currSelText; i++)
  20.  ;
  21.  
  22.  if(i<len)
  23.   box.selectedIndex=i;
  24. }
  25.  
  26.  
  27. function sortSelect( box ) /*53637269707465726C61746976652E636F6D*/
  28. {
  29.  /*  Sorts the options of <select> element 'box' alphabetically 
  30.   *  by their .text property. Preserves the selected option and
  31.   *  the .value property and disabled status of each option.
  32.   */ 
  33.  
  34.  var currSelText=(box.selectedIndex==-1?"":box[box.selectedIndex].text);
  35.  
  36.  var opts=box.options, textVals=[], newOpts=[], newIndex=-1;
  37.  
  38.  for(var i=0,len=opts.length; i<len; i++)
  39.   textVals[i]=opts[i].text; 
  40.  
  41.  textVals.sort();
  42.  
  43.  for(var i=0, len=opts.length; i<len; i++)
  44.  {
  45.   for(var j=0; j<len && opts[j].text!=textVals[i]; j++)  
  46.   ;
  47.   newOpts[i]=new Option(textVals[i], opts[j].value);
  48.   newOpts[i].disabled=opts[j].disabled;
  49.  
  50.   if(currSelText==textVals[i])
  51.    newIndex=i;
  52.  }
  53.  
  54.  for(var i=0; i<len; i++)
  55.   opts[i]=newOpts[i];
  56.  
  57.  box.selectedIndex=newIndex; 
  58. }
Dec 9 '07 #2
rnd me
427 Expert 256MB
turn a collection into an array:

[PHP]
function obValsl(ob) {
var r = [], i = 0, mx = ob.length;
for (var z = 0; z < mx; z++) {
r[z] = ob[z];
}
return r;
}[/PHP]

you then use a custom sort function, and apply the resultant array to the options collection variable.
Dec 9 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Gareth Gale | last post: by
22 posts views Thread by mike | last post: by
1 post views Thread by Ross | last post: by
4 posts views Thread by suzy | last post: by
7 posts views Thread by Kamal | last post: by
1 post views Thread by dorandoran | last post: by
5 posts views Thread by jrod11 | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.