diff --git a/frontend/src/components/DropdownMultiSelect.vue b/frontend/src/components/DropdownMultiSelect.vue
deleted file mode 100644
index 8b33c68..0000000
--- a/frontend/src/components/DropdownMultiSelect.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="dropdown">
-    <button class="btn dropdown-toggle" :class="buttonClass" type="button" :id="dropdownId" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
-      <slot></slot>
-    </button>
-    <ul class="dropdown-menu" :aria-labelledby="dropdownId">
-      <li class="px-2" v-for="item in items" :key="item.id">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" :id="'item'+item.id" :value="item.id" v-model="selectedItemIds">
-          <label class="form-check-label" :for="'item'+item.id">
-            {{ item.name }}
-          </label>
-        </div>
-      </li>
-      <li><hr class="dropdown-divider"></li>
-      <li class="px-2">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="itemAll" v-model="selectAll">
-          <label class="form-check-label" for="itemAll">
-            Select all
-          </label>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { SelectorItem } from "@/util/data";
-import IdGenerator from "@/util/id-generator";
-import { computed } from "vue";
-
-const props = withDefaults(defineProps<{
-  items: SelectorItem[];
-  modelValue: number[];
-  buttonClass?: string;
-}>(), {
-  buttonClass: 'btn-primary',
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', newSelectedItemIds: number[]): void;
-}>();
-
-
-const dropdownId = IdGenerator.generateUniqueId('dropdownMultiSelect');
-
-
-const selectedItemIds = computed<number[]>({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    onSelectionChanged(value);
-  },
-});
-const selectAll = computed<boolean>({
-  get() {
-    return props.items.length === props.modelValue.length;
-  },
-  set(value) {
-    onSelectionChanged(value ? props.items.map(item => item.id) : []);
-  },
-});
-
-
-function onSelectionChanged(newSelectedItemIds: number[]): void {
-  emit('update:modelValue', newSelectedItemIds);
-}
-</script>
diff --git a/frontend/src/components/DropdownMultiSelectButton.vue b/frontend/src/components/DropdownMultiSelectButton.vue
new file mode 100644
index 0000000..08dee2e
--- /dev/null
+++ b/frontend/src/components/DropdownMultiSelectButton.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="dropdown">
+    <button :id="dropdownId"
+            type="button"
+            class="btn dropdown-toggle"
+            :class="buttonClass"
+            data-bs-toggle="dropdown"
+            data-bs-auto-close="outside"
+            aria-expanded="false">
+      <slot></slot>
+    </button>
+    <ul class="dropdown-menu" :aria-labelledby="dropdownId">
+      <li class="px-2"
+          v-for="option in options"
+          :key="option.id">
+        <div class="form-check">
+          <input :id="'option'+option.id"
+                 type="checkbox"
+                 class="form-check-input"
+                 :value="option.id"
+                 v-model="selectedOptionIds">
+          <label class="form-check-label"
+                 :for="'option'+option.id">
+            {{ option.displayName }}
+          </label>
+        </div>
+      </li>
+      <li><hr class="dropdown-divider"></li>
+      <li class="px-2">
+        <div class="form-check">
+          <input id="optionAll"
+                 type="checkbox"
+                 class="form-check-input"
+                 v-model="selectAll">
+          <label class="form-check-label"
+                 for="optionAll">
+            Select all
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ResultType, SelectInputOptions } from "@/util/data";
+import IdGenerator from "@/util/id-generator";
+import { computed } from "vue";
+
+const props = withDefaults(defineProps<{
+  options: SelectInputOptions<ResultType>,
+  modelValue: ResultType[];
+  buttonClass?: string;
+}>(), {
+  buttonClass: 'btn-primary',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', newSelectedOptionIds: ResultType[]): void;
+}>();
+
+
+const dropdownId = IdGenerator.generateUniqueId('dropdownMultiSelect');
+
+const originalModelValues = props.modelValue;
+
+function isNotNil<T>(value: T | null | undefined): value is T {
+  return value != null;
+}
+
+const selectedOptionIds = computed<string[]>({
+  get() {
+    return props.modelValue.map(value => props.options.getOptionByValue(value)?.id).filter(isNotNil);
+  },
+  set(ids) {
+    emit('update:modelValue', ids.map(id => props.options.getOptionById(id)?.value).filter(isNotNil));
+  },
+});
+const selectAll = computed<boolean>({
+  get() {
+    return props.options.length === props.modelValue.length;
+  },
+  set(value) {
+    onSelectionChanged(value ? props.options.map(option => option.value) : originalModelValues);
+  },
+});
+
+
+function onSelectionChanged(newSelectedOptionIds: number[]): void {
+  emit('update:modelValue', newSelectedOptionIds);
+}
+</script>
diff --git a/frontend/src/views/surveyresults/SurveyResultsFull.vue b/frontend/src/views/surveyresults/SurveyResultsFull.vue
index 0356769..9d6bd12 100644
--- a/frontend/src/views/surveyresults/SurveyResultsFull.vue
+++ b/frontend/src/views/surveyresults/SurveyResultsFull.vue
@@ -5,15 +5,15 @@
       <label class="form-check-label" for="filterBelowPopularityThreshold">Filter away anime below the popularity threshold (2%)</label>
     </div>
     <h3 class="section-title" id="tableSeries">Anime Series</h3>
-    <DropdownMultiSelect :items="tableDataOfSeries.columnsAsSelectorItems" v-model="tableDataOfSeries.visibleColumnTypes">
+    <DropdownMultiSelectButton :options="(tableDataOfSeries.columnsAsSelectorItems as SelectInputOptions<ResultType>)" v-model="tableDataOfSeries.visibleColumnTypes">
       Columns
-    </DropdownMultiSelect>
+    </DropdownMultiSelectButton>
     <FullResultsTable :columns="tableDataOfSeries.processedColumns" :entries="tableDataOfSeries.entries" isAnimeSeries/>
 
     <h3 class="section-title" id="tableSpecial">Anime OVAs / ONAs / Movies / Specials</h3>
-    <DropdownMultiSelect :items="tableDataOfSpecial.columnsAsSelectorItems" v-model="tableDataOfSpecial.visibleColumnTypes">
+    <DropdownMultiSelectButton :options="(tableDataOfSpecial.columnsAsSelectorItems as SelectInputOptions<ResultType>)" v-model="tableDataOfSpecial.visibleColumnTypes">
       Columns
-    </DropdownMultiSelect>
+    </DropdownMultiSelectButton>
     <FullResultsTable :columns="tableDataOfSpecial.processedColumns" :entries="tableDataOfSpecial.entries"/>
 
     <div class="row g-0">
@@ -29,8 +29,8 @@
 </template>
 
 <script setup lang="ts">
-import DropdownMultiSelect from '@/components/DropdownMultiSelect.vue';
-import { ResultType, type SelectorItem } from '@/util/data';
+import DropdownMultiSelectButton from '@/components/DropdownMultiSelectButton.vue';
+import { ResultType, SelectInputOptions } from '@/util/data';
 import { getResultTypeName, isAnimeSeries } from '@/util/helpers';
 import { inject, ref, watch, type Ref } from 'vue';
 import FullResultsTable from './components/FullResultsTable.vue';
@@ -47,8 +47,11 @@ class TableData {
     return this.columns.filter(column => this.isColumnVisible[column.resultType]);
   }
 
-  get columnsAsSelectorItems(): SelectorItem[] {
-    return this.columns.map(column => ({ id: column.resultType, name: getResultTypeName(column.resultType, true) }));
+  get columnsAsSelectorItems(): SelectInputOptions<ResultType> {
+    return new SelectInputOptions<ResultType>(this.columns.map(column => ({
+      displayName: getResultTypeName(column.resultType, true),
+      value: column.resultType,
+    })));
   }
 
   get visibleColumnTypes(): ResultType[] {