diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts
index b215e5386..af454a395 100644
--- a/docs/assets/ts/artplayer.d.ts
+++ b/docs/assets/ts/artplayer.d.ts
@@ -89,15 +89,15 @@ type SettingOption = {
     /**
      * Whether the default is selected
      */
-    current?: boolean;
+    default?: boolean;
 
     /**
-     * Custom selector list, use in controls
+     * Custom selector list
      */
     selector?: SettingOption[];
 
     /**
-     * When selector item click, use in controls
+     * When selector item click
      */
     onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void;
 };
diff --git a/packages/artplayer-document/docs/en/Questions/How to add setting panel.md b/packages/artplayer-document/docs/en/Questions/How to add setting panel.md
index baf1203fa..fa7e75ba8 100644
--- a/packages/artplayer-document/docs/en/Questions/How to add setting panel.md	
+++ b/packages/artplayer-document/docs/en/Questions/How to add setting panel.md	
@@ -1,4 +1,107 @@
 ---
 title: How to add setting panel
 sidebar_position: 6
----
\ No newline at end of file
+---
+
+Settings panels are similar to a collection of list selections, and support multi-layer nested
+
+| Property   | Type                | Description              |
+| ---------- | ------------------- | ------------------------ |
+| `html`     | `String`、`Element` | DOM elements of selector |
+| `icon`     | `String`、`Element` | Icon of selector         |
+| `selector` | `Array`             | Selector List            |
+| `onSelect` | `Function`          | Selector Click event     |
+| `width`    | `Number`            | Panel width              |
+| `default`  | `Boolean`           | Default selected         |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+function onSubtitleSelect(item, $dom) {
+    console.info(item, $dom);
+    this.subtitle.url = item.url;
+}
+
+function onQualitySelect(item, $dom) {
+    console.info(item, $dom);
+    this.switchQuality(item.url, item.html);
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: 'Select Subtitle',
+            width: 250,
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                    onSelect: onSubtitleSelect,
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                    onSelect: onSubtitleSelect,
+                },
+            ],
+            
+        },
+        {
+            html: 'Select Quality',
+            width: 150,
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                    onSelect: onQualitySelect,
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                    onSelect: onQualitySelect,
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                    onSelect: onQualitySelect,
+                },
+            ],
+        },
+        {
+            html: 'Multi-layer nested',
+            selector: [
+                {
+                    html: 'Nested 01',
+                    selector: [
+                        {
+                            html: 'Nested 02',
+                        },
+                        {
+                            html: 'Nested 02',
+                        },
+                    ],
+                },
+                {
+                    html: 'Nested 01',
+                    selector: [
+                        {
+                            html: 'Nested 02',
+                        },
+                        {
+                            html: 'Nested 02',
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+});
+```
\ No newline at end of file
diff --git a/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md b/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md
index 9e86b2808..564e7313f 100644
--- a/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md	
+++ b/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md	
@@ -5,11 +5,28 @@ sidebar_position: 6
 
 设置面板类似于列表选择的集合，而且支持多层嵌套
 
-### 切换字幕
+| 属性       | 类型                | 描述            |
+| ---------- | ------------------- | --------------- |
+| `html`     | `String`、`Element` | 元素的 DOM 元素 |
+| `icon`     | `String`、`Element` | 元素的图标      |
+| `selector` | `Array`             | 元素列表        |
+| `onSelect` | `Function`          | 元素点击事件    |
+| `width`    | `Number`            | 列表宽度        |
+| `default`  | `Boolean`           | 是否默认选中    |
 
 <div className="run-code">▶ Run Code</div>
 
 ```js
+function onSubtitleSelect(item, $dom) {
+    console.info(item, $dom);
+    this.subtitle.url = item.url;
+}
+
+function onQualitySelect(item, $dom) {
+    console.info(item, $dom);
+    this.switchQuality(item.url, item.html);
+}
+
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
@@ -19,25 +36,71 @@ var art = new Artplayer({
     aspectRatio: true,
     settings: [
         {
-            html: 'Subtitle',
+            html: '选择字幕',
+            width: 250,
             selector: [
                 {
                     default: true,
                     html: '<span style="color:red">Subtitle 01</span>',
                     url: '/assets/sample/subtitle.srt?id=1',
+                    onSelect: onSubtitleSelect,
                 },
                 {
                     html: '<span style="color:yellow">Subtitle 02</span>',
                     url: '/assets/sample/subtitle.srt?id=2',
+                    onSelect: onSubtitleSelect,
+                },
+            ],
+            
+        },
+        {
+            html: '选择画质',
+            width: 150,
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                    onSelect: onQualitySelect,
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                    onSelect: onQualitySelect,
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                    onSelect: onQualitySelect,
+                },
+            ],
+        },
+        {
+            html: '多层嵌套',
+            selector: [
+                {
+                    html: '嵌套01',
+                    selector: [
+                        {
+                            html: '嵌套02',
+                        },
+                        {
+                            html: '嵌套02',
+                        },
+                    ],
+                },
+                {
+                    html: '嵌套01',
+                    selector: [
+                        {
+                            html: '嵌套02',
+                        },
+                        {
+                            html: '嵌套02',
+                        },
+                    ],
                 },
             ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-
-                art.subtitle.url = item.url;
-                
-                return '你点击了 ' + item.html;
-            },
         },
     ],
 });
diff --git a/packages/artplayer/types/artplayer.d.ts b/packages/artplayer/types/artplayer.d.ts
index b215e5386..af454a395 100644
--- a/packages/artplayer/types/artplayer.d.ts
+++ b/packages/artplayer/types/artplayer.d.ts
@@ -89,15 +89,15 @@ type SettingOption = {
     /**
      * Whether the default is selected
      */
-    current?: boolean;
+    default?: boolean;
 
     /**
-     * Custom selector list, use in controls
+     * Custom selector list
      */
     selector?: SettingOption[];
 
     /**
-     * When selector item click, use in controls
+     * When selector item click
      */
     onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void;
 };