I need to sort an array of html options, based on their innerHTML, but these vary depending on country. I'm using javascript/jquery for this. Currently I have 6 different languages that need support; danish, swedish, norwegian, german, finnish and english.
Danish and norwegian are the same alphabet-wise, and so are swedish and finnish (at least for the purpose of this specific task). German is very different from the others, and english is, well, english.
I've created arrays of objects to represent the hierarchy of the different letters in each country's alphabet; these look like so:
function sortByLanguage(arr, lan) {
var language;
switch(lan) {
case "dk":
case "no":
language = [
{k: "1", v: "a"},
{k: "2", v: "b"},
{k: "3", v: "c"},
{k: "4", v: "d"},
{k: "5", v: "e"},
{k: "6", v: "f"},
{k: "7", v: "g"},
{k: "8", v: "h"},
{k: "9", v: "i"},
{k: "10", v: "j"},
{k: "11", v: "k"},
{k: "12", v: "l"},
{k: "13", v: "m"},
{k: "14", v: "n"},
{k: "15", v: "o"},
{k: "16", v: "p"},
{k: "17", v: "q"},
{k: "18", v: "r"},
{k: "19", v: "s"},
{k: "20", v: "t"},
{k: "21", v: "u"},
{k: "22", v: "v"},
{k: "23", v: "w"},
{k: "24", v: "x"},
{k: "25", v: "y"},
{k: "26", v: "z"},
{k: "27", v: "æ"},
{k: "28", v: "ø"},
{k: "29", v: "å"}];
break;
case "fi":
case "se":
language = [
{k: "1", v: "a"},
{k: "2", v: "b"},
{k: "3", v: "c"},
{k: "4", v: "d"},
{k: "5", v: "e"},
{k: "6", v: "f"},
{k: "7", v: "g"},
{k: "8", v: "h"},
{k: "9", v: "i"},
{k: "10", v: "j"},
{k: "11", v: "k"},
{k: "12", v: "l"},
{k: "13", v: "m"},
{k: "14", v: "n"},
{k: "15", v: "o"},
{k: "16", v: "p"},
{k: "17", v: "q"},
{k: "18", v: "r"},
{k: "19", v: "s"},
{k: "20", v: "t"},
{k: "21", v: "u"},
{k: "22", v: "v"},
{k: "23", v: "w"},
{k: "24", v: "x"},
{k: "25", v: "y"},
{k: "26", v: "z"},
{k: "27", v: "å"},
{k: "28", v: "ä"},
{k: "29", v: "ö"}];
break;
case "de":
language = [
{k: "1", v: "a"},
{k: "2", v: "ä"},
{k: "3", v: "b"},
{k: "4", v: "c"},
{k: "5", v: "d"},
{k: "6", v: "e"},
{k: "7", v: "f"},
{k: "8", v: "g"},
{k: "9", v: "h"},
{k: "10", v: "i"},
{k: "11", v: "j"},
{k: "12", v: "k"},
{k: "13", v: "l"},
{k: "14", v: "m"},
{k: "15", v: "n"},
{k: "16", v: "o"},
{k: "17", v: "ö"},
{k: "18", v: "p"},
{k: "19", v: "q"},
{k: "20", v: "r"},
{k: "21", v: "s"},
{k: "22", v: "t"},
{k: "23", v: "u"},
{k: "24", v: "ü"},
{k: "25", v: "v"},
{k: "26", v: "w"},
{k: "27", v: "x"},
{k: "28", v: "y"},
{k: "29", v: "z"}];
break;
default:
language = [
{k: "1", v: "a"},
{k: "2", v: "b"},
{k: "3", v: "c"},
{k: "4", v: "d"},
{k: "5", v: "e"},
{k: "6", v: "f"},
{k: "7", v: "g"},
{k: "8", v: "h"},
{k: "9", v: "i"},
{k: "10", v: "j"},
{k: "11", v: "k"},
{k: "12", v: "l"},
{k: "13", v: "m"},
{k: "14", v: "n"},
{k: "15", v: "o"},
{k: "16", v: "p"},
{k: "17", v: "q"},
{k: "18", v: "r"},
{k: "19", v: "s"},
{k: "20", v: "t"},
{k: "21", v: "u"},
{k: "22", v: "v"},
{k: "23", v: "w"},
{k: "24", v: "x"},
{k: "25", v: "y"},
{k: "26", v: "z"}];
break;
}
}
So, how do I sort the array "arr" based upon the k-values of the letters in the language array "lan"? Here is a sample of the data I'm working with:
<select id="countrySelect" name="Country" class="input" style="width: 194px;">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algir</option>
<option value="31">Britiske jomfruøyer</option>
<option value="32">Brunei Darussalam</option>
<option value="33">Bulgaria</option>
<option value="34">Burkina Faso</option>
<option value="35">Burundi</option>
<option value="36">Kambodsja</option>
<option value="37">Kamerun</option>
<option value="38">Canada</option>
<option value="40">Den sentralafrikanske republikk</option>
<option value="41">Tsjad</option>
<option value="42" selected="selected">Chile</option>
<option value="64">Finland</option>
<option value="65">De forente arabiske emirater</option>
<option value="66">USAs mindre utenforliggende øyer</option>
<option value="67">Frankrike</option>
<option value="236">Zambia</option>
<option value="237">Zimbabwe</option>
<option value="238">Ekvatorial-Guinea</option>
<option value="240">Østerrike</option>
<option value="239">Øst-Timor</option>
</select>
I'm quite new to javascript, so this is kind of blowing my mind. I hope this makes sense, and thanks.