# Dropdown element sort

**URL:** <https://forum.wixstudio.com/t/dropdown-element-sort/79333>\
**Category:** Ask the community\
**Tags:** question, code, wix-studio\
**Created:** [August 13, 2026, 9:52pm UTC](https://forum.wixstudio.com/t/dropdown-element-sort/79333 "2026-08-13T21:52:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![John-Dunham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john-dunham/32/122072_2.png) [@John-Dunham](https://forum.wixstudio.com/u/John-Dunham)\
**Post date:** [August 13, 2026, 9:52pm UTC](https://forum.wixstudio.com/t/dropdown-element-sort/79333/1 "2026-08-13T21:52:26Z")

</div>

I have a dropdown filter that live filters my dataset. It all functions correctly however the month elements are sorted alphabetically. I need them in month order Jan, Feb, Mar Apr, etc. It is understood that this functionality does not exist yet and the only way to correct is with code and Velo.

I have tried to have AI write the code with no success.

See the dropdown on this page

> **[Events (List) | Thermop OnLine](https://thermoponline.wixsite.com/website/events)**

Any code to solve this problem is appreciated.

Here is what I got from Code With AI: Write Velo Code. It does not work.

 ![Screenshot 2026-08-13 at 6.21.55 PM](https://us1.discourse-cdn.com/wix/original/3X/6/d/6d709f7e53f7910eefd79a29a2bb52fc14b7f82c.png)

```javascript
const MONTH_ORDER = [
  "jan",
  "feb",
  "mar",
  "apr",
  "may",
  "jun",
  "jul",
  "aug",
  "sep",
  "oct",
  "nov",
  "dec"
];

$w.onReady(() => {
  const dropdown = $w("#monthDropdown");
  const originalOptions = dropdown.options || [];

  const sortedOptions = originalOptions
    .map((option, index) => ({
      option,
      index,
      monthIndex: getMonthIndex(option.label)
    }))
    .sort((first, second) => {
      const firstOrder = first.monthIndex === -1 ? MONTH_ORDER.length : first.monthIndex;
      const secondOrder = second.monthIndex === -1 ? MONTH_ORDER.length : second.monthIndex;

      return firstOrder - secondOrder || first.index - second.index;
    })
    .map(({ option }) => option);

  dropdown.options = sortedOptions;
});

function getMonthIndex(label) {
  const abbreviation = String(label || "")
    .trim()
    .slice(0, 3)
    .toLowerCase();

  return MONTH_ORDER.indexOf(abbreviation);
}

```

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [August 14, 2026, 9:25am UTC](https://forum.wixstudio.com/t/dropdown-element-sort/79333/2 "2026-08-14T09:25:07Z")

</div>

Since the dropdown is connected to a dataset, I imagine the code is running before the dataset has populated the dropdown.

Should be as simple a fix as wrapping the code within the `$w.onReady(() => {})` with `$w("#dataset1").onReady(() => {})`

So something like:

```javascript
const MONTH_ORDER = [
    "jan",
    "feb",
    "mar",
    "apr",
    "may",
    "jun",
    "jul",
    "aug",
    "sep",
    "oct",
    "nov",
    "dec"
];

$w.onReady(() => {
    $w("#dataset1").onReady(() => {

        const dropdown = $w("#monthDropdown");
        const originalOptions = dropdown.options || [];

        const sortedOptions = originalOptions
            .map((option, index) => ({
                option,
                index,
                monthIndex: getMonthIndex(option.label)
            }))
            .sort((first, second) => {
                const firstOrder = first.monthIndex === -1 ? MONTH_ORDER.length : first.monthIndex;
                const secondOrder = second.monthIndex === -1 ? MONTH_ORDER.length : second.monthIndex;

                return firstOrder - secondOrder || first.index - second.index;
            })
            .map(({ option }) => option);

        dropdown.options = sortedOptions;
    })
});

function getMonthIndex(label) {
    const abbreviation = String(label || "")
        .trim()
        .slice(0, 3)
        .toLowerCase();

    return MONTH_ORDER.indexOf(abbreviation);
}

```

Worth noting that the “All” and “-None-” option will be at the end of the list

---

<div class="post-metadata">

**Author:** ![John-Dunham](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/john-dunham/32/122072_2.png) [@John-Dunham](https://forum.wixstudio.com/u/John-Dunham)\
**Post date:** [August 15, 2026, 2:50pm UTC](https://forum.wixstudio.com/t/dropdown-element-sort/79333/3 "2026-08-15T14:50:18Z")

</div>

Problem solved. Thank you. It is worth noting that I have seen similar questions. Week, month, other sorting in different types of live filters.

Along with the additional wrapper, I only had to change the name of the dropdown object.

Also, what code language is this? The last time I coded was with PASCAL and FORTRAN in the 80’s. 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![system](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/system/32/86885_2.png) [@system](https://forum.wixstudio.com/u/system)\
**Post date:** [September 14, 2026, 2:50pm UTC](https://forum.wixstudio.com/t/dropdown-element-sort/79333/4 "2026-09-14T14:50:43Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.