diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 66b18a45d..a3b7fa4df 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -4,7 +4,7 @@ import {addCol} from "./addCol";
 import {getColIconByType} from "./col";
 import {setPosition} from "../../../util/setPosition";
 import {hasClosestByAttribute} from "../../util/hasClosest";
-import {bindSelectEvent, getSelectHTML, setSelectOption} from "./select";
+import {bindSelectEvent, getSelectHTML, setOptionCell, setSelectOption} from "./select";
 import {addFilter, getFiltersHTML, setFilter} from "./filter";
 import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
 
@@ -435,6 +435,10 @@ export const openMenuPanel = (protyle: IProtyle,
                     setSelectOption(protyle, data, options, target);
                     event.stopPropagation();
                     break;
+                } else if (type === "setOptionCell") {
+                    setOptionCell(protyle, data, options, target, menuElement);
+                    event.stopPropagation();
+                    break;
                 }
                 target = target.parentElement;
             }
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index a5274e4b0..398bf1101 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -54,7 +54,7 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
                         if (data.columns[index].hidden) {
                             return;
                         }
-                        let text: string;
+                        let text = "";
                         if (cell.valueType === "text") {
                             text = `<span class="av__celltext">${cell.value?.text.content || ""}</span>`;
                         } else if (cell.valueType === "block") {
@@ -68,7 +68,9 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
                                 text = "<span class=\"av__celltext\"></span>";
                             }
                         } else if (cell.valueType === "mSelect") {
-                            text = `<span class="av__celltext">${cell.value?.mSelect.content || ""}</span>`;
+                            (cell.value?.mSelect as [])?.forEach((item: { content: string, color: string }) => {
+                                text += `<span class="av__celltext"><span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span></span>`;
+                            });
                         } else if (cell.valueType === "date") {
                             text = `<span class="av__celltext">${cell.value?.date.content || ""}</span>`;
                         }
@@ -162,7 +164,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
             if (!titleElement || titleElement.textContent.trim() === operation.data.name) {
                 return;
             }
-            titleElement.textContent =  operation.data.name;
+            titleElement.textContent = operation.data.name;
             titleElement.dataset.title = operation.data.name;
         });
     } else {
diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts
index 1d2334ced..5b9c5dc6c 100644
--- a/app/src/protyle/render/av/select.ts
+++ b/app/src/protyle/render/av/select.ts
@@ -13,7 +13,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
             if (!key ||
                 (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
                     item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
-                html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
+                html += `<button data-type="setOptionCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
     <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color)${item.color}">
@@ -30,14 +30,15 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
     }
     if (!hasMatch && key) {
         const colorIndex = (options?.length || 0) % 13 + 1;
-        html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
+        html = `<button data-type="setOptionCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
+<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
 <div class="fn__flex-1">
     <span class="b3-chip" style="background-color:var(--b3-font-background${colorIndex});color:var(--b3-font-color${colorIndex})">
         <span class="fn__ellipsis">${key}</span>
     </span>
 </div>
 <span class="b3-menu__accelerator">Enter</span>
-</button>`;
+</button>${html}`;
     }
     return html;
 };
@@ -156,6 +157,46 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
     cellElement: HTMLElement
 }) => {
     const inputElement = menuElement.querySelector("input");
+    const colId = options.cellElement.dataset.colId;
+    let colData: IAVColumn;
+    data.columns.find((item: IAVColumn) => {
+        if (item.id === colId) {
+            colData = item;
+            return;
+        }
+    });
+    if (!colData.options) {
+        colData.options = [];
+    }
+    inputElement.addEventListener("input", (event: InputEvent) => {
+        if (event.isComposing) {
+            return;
+        }
+        menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
+    });
+    inputElement.addEventListener("compositionend", (event: InputEvent) => {
+        if (event.isComposing) {
+            return;
+        }
+        menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
+    });
+    inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
+        if (event.isComposing) {
+            return;
+        }
+        let currentElement = upDownHint(menuElement.lastElementChild, event, "b3-menu__item--current");
+        if (event.key === "Enter") {
+            if (!currentElement) {
+                currentElement = menuElement.querySelector(".b3-menu__item--current");
+            }
+            setOptionCell(protyle, data, options, currentElement, menuElement);
+        }
+    });
+};
+
+export const setOptionCell = (protyle: IProtyle, data: IAV, options: {
+    cellElement: HTMLElement
+}, currentElement: HTMLElement, menuElement:HTMLElement) => {
     const rowId = options.cellElement.parentElement.dataset.id;
     const colId = options.cellElement.dataset.colId;
     const cellId = options.cellElement.dataset.id;
@@ -181,88 +222,66 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
             return true;
         }
     });
-    inputElement.addEventListener("input", (event: InputEvent) => {
-        if (event.isComposing) {
-            return;
-        }
-        menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
-    });
-    inputElement.addEventListener("compositionend", (event: InputEvent) => {
-        if (event.isComposing) {
-            return;
-        }
-        menuElement.lastElementChild.innerHTML = filterSelectHTML(inputElement.value, colData.options);
-    });
-    inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
-        if (event.isComposing) {
-            return;
-        }
-        let currentElement = upDownHint(menuElement.lastElementChild, event, "b3-menu__item--current");
-        if (event.key === "Enter") {
-            if (!currentElement) {
-                currentElement = menuElement.querySelector(".b3-menu__item--current");
+
+    let oldValue;
+    if (colData.type !== "select") {
+        oldValue = Object.assign([], cellData.value.mSelect.content);
+        cellData.value.mSelect.content.push({
+            color: currentElement.dataset.color,
+            content: currentElement.dataset.name
+        });
+    } else {
+        oldValue = Object.assign({}, cellData.value.select);
+        cellData.value.select = {
+            color: currentElement.dataset.color,
+            content: currentElement.dataset.name
+        };
+    }
+    if (currentElement.querySelector(".b3-menu__accelerator")) {
+        colData.options.push({
+            color: currentElement.dataset.color,
+            name: currentElement.dataset.name
+        });
+        transaction(protyle, [{
+            action: "updateAttrViewColOptions",
+            id: colId,
+            parentID: data.id,
+            data: colData.options
+        }, {
+            action: "updateAttrViewCell",
+            id: cellId,
+            rowID: rowId,
+            parentID: data.id,
+            data: {
+                [colData.type]: cellData.value
             }
-            let oldValue;
-            if (colData.type !== "select") {
-                oldValue = Object.assign([], cellData.value.mSelect.content);
-                cellData.value.mSelect.content.push({
-                    color: currentElement.dataset.color,
-                    content: currentElement.dataset.name
-                });
-            } else {
-                oldValue = Object.assign({}, cellData.value.select);
-                cellData.value.select = {
-                    color: currentElement.dataset.color,
-                    content: currentElement.dataset.name
-                };
+        }], [{
+            action: "removeAttrViewColOption",
+            id: colId,
+            parentID: data.id,
+            data: currentElement.dataset.name,
+        }]);
+    } else {
+        transaction(protyle, [{
+            action: "updateAttrViewCell",
+            id: cellId,
+            rowID: rowId,
+            parentID: data.id,
+            data: cellData.value
+        }], [{
+            action: "updateAttrViewCell",
+            id: cellId,
+            rowID: rowId,
+            parentID: data.id,
+            data: {
+                [colData.type]: oldValue
             }
-            if (currentElement.querySelector(".b3-menu__accelerator")) {
-                colData.options.push({
-                    color: currentElement.dataset.color,
-                    name: currentElement.dataset.name
-                });
-                transaction(protyle, [{
-                    action: "updateAttrViewColOptions",
-                    id: colId,
-                    parentID: data.id,
-                    data: colData.options
-                }, {
-                    action: "updateAttrViewCell",
-                    id: cellId,
-                    rowID: rowId,
-                    parentID: data.id,
-                    data: {
-                        [colData.type]: cellData.value
-                    }
-                }], [{
-                    action: "removeAttrViewColOption",
-                    id: colId,
-                    parentID: data.id,
-                    data: currentElement.dataset.name,
-                }]);
-            } else {
-                transaction(protyle, [{
-                    action: "updateAttrViewCell",
-                    id: cellId,
-                    rowID: rowId,
-                    parentID: data.id,
-                    data: cellData.value
-                }], [{
-                    action: "updateAttrViewCell",
-                    id: cellId,
-                    rowID: rowId,
-                    parentID: data.id,
-                    data: {
-                        [colData.type]: oldValue
-                    }
-                }]);
-            }
-            if (colData.type === "select") {
-                menuElement.parentElement.remove();
-            }
-        }
-    });
-};
+        }]);
+    }
+    if (colData.type === "select") {
+        menuElement.parentElement.remove();
+    }
+}
 
 export const getSelectHTML = (data: IAV, options: { cellElement: HTMLElement }) => {
     const cellId = options.cellElement.dataset.id;