Amazon Contextual Product Ads

Sunday, 15 May 2011

Sorting html "select" element

Recently I had to sort "select" element in my HTML page. I found that this is not so simple task, since it has no build in functionality to sort elements. The solution by using JavaScript is pretty simple, if option value and option text are the same. Just put all the options into Array object and use build-in sort() function

Next step is just fill it back 

for(i=0; i<slct.length; i++) {
slct.options[i].text
= slctArr[i];
slct.options[i].value
= slctArr[i];
}

However more work need to be done in order to sort element where option value is not the same as option text

First of all we need to store text values in the array and also values into array


var slct = document.getElementById('slctElem');

txtArr
= new Array();
valArr
= new Array();


We also will make a backup of original order of the text element


orgArr = new Array();

Extract all the relevant values and put them into arrays


for(i=0; i<slct.length; i++)
{
txtArr[i]
= slct.options[i].text;
valArr[i]
= slct.options[i].value;
orgArr[i]
= slct.options[i].text;
}

Sort text array


txtArr.sort();

//Now we need to make a loop to fill back the select element

for(i=0; i<slct.length; i++)
{

// make another loop to find coresponding value. Since we have a backup array, the correct value located in the same place(index) as original text

slct.options[i].text
= txtArr[i];
for(j=0; j<slct.length; j++)
if (txtArr[i] == orgArr[j])
slct.options[i].value
= valArr[j];
}


I am attaching the full working HTML file with example





SortExample

No comments:

Post a Comment