dropdown orders numbers incorrectly Asked Feb 21 '18 at 09:40 Active Feb 21 '18 at 10:40 Viewed 139 times -1 I have a select dropdown which is dynamically populated with filenames from our server, on the server directory everything is ordered correctly. But on the dropdown, it numbers higher integers above lower e.g. Australia #11 comes after Australia #100 etc, as shown in image. Whilst I understand how to change order when it's in html, I'm not sure if this is possible when it's dynamically populated? Also shown images which show it ordered correctly in directory but not in dropdown. Dropdown: Directory: javascript jquery html css edited Feb 21 '18 at 10:40 Takit Isy 9,688 3 23 47 asked Feb 21 '18 at 09:40 Ryan Peters 1 2 1 where is the image? – Nihal Feb 21 '18 at 09:41 Can you show us your code please – Hunter Feb 21 '18 at 09:42 sure it's literally just a dropdown - dropdown – Ryan Peters Feb 21 '18 at 09:43

Answer 1

The list is sorted alphabetically, so "#11" comes after "#109".

To fix this, you can write your own sort function to consider only the numerical part instead of the whole string. That way it gets sorted numerically and not alphabetically. Here's a quick ES6 solution.

let countryList  =    [/*list here*/];

countryList      =    countryList.sort( (eachLine, prevLine) => eachLine.split("#")[1].split(" ")[0] - prevLine.split("#")[1].split(" ")[0] );

This simply sorts it based on the number part of the string alone and ignores the rest.