diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
index bf3260a1fa1..c3c3df2fce3 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor
@@ -9,7 +9,9 @@
     <section ignore>
         @((MarkupString)Localizer["NormalDesc"].Value)
     </section>
-    <SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync" GetTextCallback="@GetTextCallback" TableMinWidth="300" IsClearable>
+    <SelectTable TItem="Foo" @bind-Value="@_foo" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsClearable>
         <TableColumns>
             <TableColumn @bind-Field="@context.Name"></TableColumn>
             <TableColumn @bind-Field="@context.Address"></TableColumn>
@@ -46,7 +48,7 @@
                 <div class="select-custom-header">
                     <div class="id">@context.Id</div>
                     <div class="name">@context.Name</div>
-                    <Light Color="@(context.Complete ? Color.Success : Color.Warning)"></Light>
+                    <Light Color="@(context.Complete? Color.Success: Color.Warning)"></Light>
                 </div>
                 <Divider />
                 <div class="select-custom-body">
@@ -112,4 +114,32 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["IsMultipleSelectTitle"]" Introduction="@Localizer["IsMultipleSelectIntro"]" Name="IsMultipleSelect">
+    <section ignore>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["IsMultipleDesc1"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc2"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc3"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc4"].Value)</li>
+            <li>@((MarkupString)Localizer["IsMultipleDesc5"].Value)</li>
+        </ul>
+    </section>
+    <SelectTable TItem="Foo" @bind-SelectedItems="@_selectedFoos" OnQueryAsync="OnQueryAsync"
+                 GetTextCallback="@GetTextCallback" TableMinWidth="300"
+                 IsMultipleSelect IsClearable MultiSelectedItemsMaxDisplayCountColor="Color.Warning">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+    <section ignore>
+        <div class="select-table-list">
+            @foreach (var item in _selectedFoos)
+            {
+                <div>@item.Name</div>
+            }
+        </div>
+    </section>
+</DemoBlock>
+
 <AttributeTable Type="typeof(SelectTable<>)" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs
index 8b3199e0271..ccfb36772e7 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs
@@ -34,6 +34,8 @@ public partial class SelectTables
 
     private readonly SelectTableMode Model = new();
 
+    private List<Foo> _selectedFoos = [];
+
     private static string? GetTextCallback(Foo foo) => foo.Name;
 
     private List<Foo> _items = default!;
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css
index 448fc071fc9..a75a56a2abd 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css
@@ -1,4 +1,4 @@
-::deep .divider {
+::deep .divider {
     --bb-divider-margin: 1rem 0;
     --bb-divider-bg: #c0c4cc;
 }
@@ -54,3 +54,11 @@
     ::deep .select-custom-detail > div {
         margin-bottom: .5rem;
     }
+
+.select-table-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    overflow: auto;
+    max-height: 120px;
+}
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index fdcdc59e371..56ac19e19e7 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2053,7 +2053,7 @@
     "DropdownCascadeItem6": "Haidian",
     "DropdownCascadeItem7": "Jingan",
     "DropdownCascadeItem8": "Huangpu",
-    "DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting `<itemsTemplate>`. In this example, we use the `<DropdownItem>` component and `<DropdownDivider>` component to customize the dropdown list component.",
+    "DropdownItemsTemplateIntro": "You can customize all the content of the dropdown list by setting <code>ItemsTemplate</code>. In this example, we use the <code>DropdownItem</code> component and <code>DropdownDivider</code> component to customize the dropdown list component.",
     "DropdownItemsTemplateTitle": "Items Template",
     "DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered.",
     "DropdownItemTemplateTitle": "Item Template",
@@ -2766,13 +2766,13 @@
     "LabelsNormalDescription": "When two-way binding is not used",
     "LabelsNormalDescription2": "When using two-way binding",
     "LabelsNormalGroupBox1Tips1": "No settings in the first text box, no label",
-    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=``</code> displays a placeholder label without content",
+    "LabelsNormalGroupBox1Tips2": "The second text box setting <code>ShowLabel='true' DisplayText=''</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Tips3": "The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label",
     "LabelsNormalGroupBox1Tips4": "The fourth text box setting <code>ShowLabel='true' DisplayText='@null'</code> displays a placeholder label without content",
     "LabelsNormalGroupBox1Title": "No two-way binding",
     "LabelsNormalGroupBox2Tips1": "The first text box is set to <code>@bind-Value='Dummy.Name'</code>, no label is displayed",
     "LabelsNormalGroupBox2Tips2": "The second text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@Localizer[nameof(Foo.Address)]'</code> Display the contents of the setting",
-    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=``</code> Show no content placeholder label",
+    "LabelsNormalGroupBox2Tips3": "The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=''</code> Show no content placeholder label",
     "LabelsNormalGroupBox2Tips4": "The fourth text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@null'</code> Display the label content under the resource file mechanism<code>Label</code> code>",
     "LabelsNormalGroupBox2Title": "Two-way binding",
     "LabelsNormalIntro": "Suitable for data entry",
@@ -3937,6 +3937,13 @@
     "Intro": "The dropdown box is a table used to display the selection requirements for complex types",
     "IsDisabledIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses select",
     "IsDisabledTitle": "Disabled",
+    "IsMultipleDesc1": "Set the maximum width of the selected item using the <code>MultiSelectedItemMaxWidth</code> parameter.",
+    "IsMultipleDesc2": "Set the maximum row height of the component using the <code>MultiSelectedItemsMaxHeight</code> parameter.",
+    "IsMultipleDesc3": "The <code>MultiSelectedItemsMaxDisplayCount</code> parameter sets the total number of selected items to be displayed. To customize the color, please set the variable <code>--bb-select-table-item-count-bg-color</code> in your <code>CSS</code>.",
+    "IsMultipleDesc4": "The <code>MultiSelectedItemsMaxDisplayCountColor</code> parameter sets the color of total number of selected items to be displayed.",
+    "IsMultipleDesc5": "Set the selected item set using the <code>@bind-SelectedItems=\"SelectedItems\"</code> parameter. Do not use <code>Value</code> in multi-select mode.",
+    "IsMultipleSelectIntro": "Enable multi-selection using the parameter <code>IsMultipleSelect=\"true\"</code>.",
+    "IsMultipleSelectTitle": "Multiple Select",
     "NormalDesc": "You can use <code>IsClearable</code> to control whether to display the clear button. The default value is <code>false</code>",
     "NormalIntro": "Suitable for candidates with a relatively large amount of information, presenting information using <code>Table</code>",
     "NormalTitle": "Basic usage",
@@ -4121,7 +4128,7 @@
     "SpeechDescription2": "When using this component, you need to reference its component package",
     "SpeechGroupBoxHeaderText": "command panel",
     "SpeechGroupBoxTitle": "Command output area",
-    "SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>'Please turn on the light for me'</i></b>",
+    "SpeechLi1": "Click <b>start</b> After pressing the button, speak to the computer <b><i>Please turn on the light for me</i></b>",
     "SpeechLi2": "After the computer receives the command, it will ask <b><i>Are you sure you want to turn on the light? Please confirm!</i></b>",
     "SpeechLi3": "You speak to the computer： <b><i>confirm</i></b>",
     "SpeechLi4": "The computer executes the command and enters it in the text box below <b><i>has been opened for you</i></b> text",
@@ -5670,7 +5677,7 @@
   "BootstrapBlazor.Server.Components.Samples.UploadCards": {
     "ButtonUploadIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
     "ButtonUploadTitle": "Basic usage",
-    "UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the `<code>ActionButtonTemplate</code>` parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the `<code>BeforeActionButtonTemplate</code>` parameter (insert it before the default button).",
+    "UploadActionButtonTemplateIntro": "Customize the action buttons on the card by setting the <code>ActionButtonTemplate</code> parameter (appending it to the end of the default button), and customize the action buttons on the card by setting the <code>BeforeActionButtonTemplate</code> parameter (insert it before the default button).",
     "UploadActionButtonTemplateTitle": "Custom action button",
     "UploadBase64Intro": "By setting the <code>PrevUrl</code> parameter value of the <code>UploadFile</code> instance, use the image content string in the <code>data:image/xxx;base64,XXXXX</code> format as the preview file path",
     "UploadBase64Title": "Base64 format",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index cc472b215bf..cb132bade5e 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3937,6 +3937,13 @@
     "Intro": "下拉框为表格用于展示复杂类型的选择需求",
     "IsDisabledIntro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止选择",
     "IsDisabledTitle": "禁用",
+    "IsMultipleDesc1": "通过 <code>MultiSelectedItemMaxWidth</code> 参数设置选中项最大宽度",
+    "IsMultipleDesc2": "通过 <code>MultiSelectedItemsMaxHeight</code> 参数设置组件最大行高",
+    "IsMultipleDesc3": "通过 <code>MultiSelectedItemsMaxDisplayCount</code> 参数设置选中项显示总数量",
+    "IsMultipleDesc4": "通过 <code>MultiSelectedItemsMaxDisplayCountColor</code> 参数设置选中项显示总数量标签颜色，如需自定义颜色请设置 <code>css</code> 变量 <code>--bb-select-table-item-count-bg-color</code>",
+    "IsMultipleDesc5": "通过 <code>@bind-SelectedItems=\"SelectedItems\"</code> 参数设置选中项集合，多选模式下不要使用 <code>Value</code>",
+    "IsMultipleSelectIntro": "通过 <code>IsMultipleSelect=\"true\"</code> 参数开启多选",
+    "IsMultipleSelectTitle": "多选",
     "NormalDesc": "可通过 <code>IsClearable</code> 控制是否显示清除小按钮，默认值 <code>false</code>",
     "NormalIntro": "适用于候选项信息量比较大，用 <code>Table</code> 呈现信息量",
     "NormalTitle": "基本功能",
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index 81d8957de88..5f06f943ea2 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.3.1</Version>
+    <Version>10.3.2-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss
index 50f794df5bf..d0fc99a2117 100644
--- a/src/BootstrapBlazor/Components/Select/Select.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/Select.razor.scss
@@ -1,4 +1,4 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
 .select,
 .popover-dropdown {
@@ -11,6 +11,7 @@
     --bb-select-padding: #{$bb-select-padding};
     --bb-select-append-width: #{$bb-select-append-width};
     --bb-select-append-color: #{$bb-select-append-color};
+    --bb-select-append-right: 0;
 }
 
 .select:not(.cascade) .dropdown-menu {
@@ -105,7 +106,7 @@
     position: absolute;
     height: 100%;
     width: var(--bb-select-append-width);
-    right: 0;
+    right: var(--bb-select-append-right);
     top: 0;
     color: var(--bb-select-append-color);
     pointer-events: none;
@@ -129,7 +130,7 @@
         position: absolute;
         height: 100%;
         width: var(--bb-select-append-width);
-        right: 0;
+        right: var(--bb-select-append-right);
         top: 0;
         color: var(--bb-select-append-color);
         align-items: center;
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor b/src/BootstrapBlazor/Components/Select/SelectTable.razor
index 6183da0a84c..2030f8ac355 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor
@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TItem
 @inherits PopoverDropdownBase<TItem>
 @attribute [BootstrapModuleAutoLoader("Select/SelectTable.razor.js", JSObjectReference = true)]
@@ -7,11 +7,43 @@
 {
     <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth" class="@ClassName">
-    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString" aria-expanded="false">
+<div @attributes="AdditionalAttributes" id="@Id" data-bs-toggle="lgbSelect" data-bb-min-width="@TableMinWidth"
+     class="@ClassName">
+    <div class="dropdown-toggle" data-bs-toggle="bb.dropdown" aria-expanded="false"
+         data-bs-auto-close="outside" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString">
         @if (Template == null)
         {
-            <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassName" value="@GetText()" />
+            @if (IsMultipleSelect)
+            {
+                <div class="@MultiItemsClassString" id="@InputId" style="@MultiItemsStyleString">
+                    @foreach (var item in GetDisplayItems())
+                    {
+                        <div class="multi-select-item-group">
+                            <span class="multi-select-close" data-bb-index="@GetIndexString(item)">
+                                <i class="@_closeButtonIcon"></i>
+                            </span>
+                            <span class="multi-select-item">@GetText(item)</span>
+                        </div>
+                    }
+                    @if (SelectedItems.Count > MultiSelectedItemsMaxDisplayCount)
+                    {
+                        <div class="@MultiSelectedItemCountClassString">
+                            @GetCountText()
+                        </div>
+                    }
+                    @if (SelectedItems.Count == 0)
+                    {
+                        <div class="multi-select-item-ph">
+                            @PlaceHolder
+                        </div>
+                    }
+                </div>
+            }
+            else
+            {
+                <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder"
+                       class="@InputClassName" value="@GetText(Value)" />
+            }
         }
         else
         {
@@ -47,6 +79,7 @@
                    CustomerSearchModel="CustomerSearchModel" CustomerSearchTemplate="CustomerSearchTemplate"
                    IsPagination="IsPagination" PageItemsSource="PageItemsSource" ShowGotoNavigator="false" MaxPageLinkCount="3"
                    OnClickRowCallback="OnClickRowCallback" OnQueryAsync="OnQueryAsync"
+                   IsMultipleSelect="IsMultipleSelect" @bind-SelectedRows="SelectedItems"
                    ShowEmpty="ShowEmpty" EmptyTemplate="EmptyTemplate"></Table>
         </div>
     </RenderTemplate>
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
index 60c8f4d5115..fbe44f5b508 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.cs
@@ -15,6 +15,48 @@ namespace BootstrapBlazor.Components;
 [CascadingTypeParameter(nameof(TItem))]
 public partial class SelectTable<TItem> : IColumnCollection where TItem : class, new()
 {
+    /// <summary>
+    /// <para lang="zh">获得/设置 是否为多选模式，默认值为 false</para>
+    /// <para lang="en">Gets or sets Multiple Selection Mode. Default false</para>
+    /// </summary>
+    [Parameter]
+    public bool IsMultipleSelect { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下组件最大高度，默认值为 null 使用样式默认值 65px</para>
+    /// <para lang="en">Gets or sets Maximum height in multiple selection mode. Default null</para>
+    /// </summary>
+    [Parameter]
+    public string? MultiSelectedItemsMaxHeight { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下组件显示最大数量，超过数量用数字显示，默认值为 8 </para>
+    /// <para lang="en">Gets or sets the maximum number of components is displayed in multiple selection mode; any quantity exceeding this is displayed as a number. Default value is 8</para>
+    /// </summary>
+    [Parameter]
+    public int MultiSelectedItemsMaxDisplayCount { get; set; } = 8;
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下组件显示最大数量标签颜色，默认值 <see cref="Color.None"/> 未设置</para>
+    /// <para lang="en">Gets or sets the color of maximum number of components is displayed in multiple selection mode. Default value is <see cref="Color.None"/></para>
+    /// </summary>
+    [Parameter]
+    public Color MultiSelectedItemsMaxDisplayCountColor { get; set; } = Color.None;
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下已选择项集合 默认 null</para>
+    /// <para lang="en">Gets or sets the selected items collection in multiple selection mode. Default null</para>
+    /// </summary>
+    [Parameter]
+    public List<TItem> SelectedItems { get; set; } = [];
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下已选择项集合变化回调方法</para>
+    /// <para lang="en">Gets or sets the callback method when selected items collection changes in multiple selection mode</para>
+    /// </summary>
+    [Parameter]
+    public EventCallback<List<TItem>> SelectedItemsChanged { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 TableHeader 实例</para>
     /// <para lang="en">Gets or sets TableHeader Instance</para>
@@ -90,6 +132,13 @@ namespace BootstrapBlazor.Components;
     [Parameter]
     public RenderFragment? EmptyTemplate { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 多选模式下选中项最大宽度 默认 null 未设置使用样式内置默认值 6 个汉字</para>
+    /// <para lang="en">Gets or sets the maximum width of selected item in multiple selection mode. Default null</para>
+    /// </summary>
+    [Parameter]
+    public string? MultiSelectedItemMaxWidth { get; set; }
+
     /// <summary>
     /// <para lang="zh">获得/设置 IIconTheme 服务实例</para>
     /// <para lang="en">Gets or sets IIconTheme Service Instance</para>
@@ -118,6 +167,19 @@ namespace BootstrapBlazor.Components;
         .AddClass(ValidCss)
         .Build();
 
+    private string? MultiItemsClassString => CssBuilder.Default("multi-select-items")
+        .AddClass(InputClassName)
+        .Build();
+
+    private string? MultiItemsStyleString => CssBuilder.Default()
+        .AddClass($"--bb-select-table-item-width: {MultiSelectedItemMaxWidth};", !string.IsNullOrEmpty(MultiSelectedItemMaxWidth))
+        .AddClass($"--bb-select-max-height: {MultiSelectedItemsMaxHeight};", !string.IsNullOrEmpty(MultiSelectedItemsMaxHeight))
+        .Build();
+
+    private string? MultiSelectedItemCountClassString => CssBuilder.Default("multi-select-item-group-count")
+        .AddClass($"bg-{MultiSelectedItemsMaxDisplayCountColor.ToDescriptionString()}", MultiSelectedItemsMaxDisplayCountColor != Color.None)
+        .Build();
+
     private string? AppendClassString => CssBuilder.Default("form-select-append")
         .AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
         .AddClass($"text-success", IsValid.HasValue && IsValid.Value)
@@ -246,6 +308,7 @@ namespace BootstrapBlazor.Components;
         .Build();
 
     private Table<TItem> _table = default!;
+    private string? _closeButtonIcon;
 
     /// <summary>
     /// <inheritdoc/>
@@ -274,12 +337,19 @@ protected override void OnParametersSet()
             throw new InvalidOperationException("Please set GetTextCallback value");
         }
 
+        SelectedItems ??= [];
+
         PlaceHolder ??= Localizer[nameof(PlaceHolder)];
         DropdownIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectDropdownIcon);
         ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SelectClearIcon);
+        _closeButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.MultiSelectCloseIcon);
     }
 
-    private string? GetText() => Value == default ? null : GetTextCallback(Value);
+    private string? GetText(TItem item) => item == default ? null : GetTextCallback(item);
+
+    private string GetIndexString(TItem item) => SelectedItems.IndexOf(item).ToString();
+
+    private string GetCountText() => $"+ {SelectedItems.Count - MultiSelectedItemsMaxDisplayCount}";
 
     private async Task OnClickRowCallback(TItem item)
     {
@@ -289,6 +359,9 @@ private async Task OnClickRowCallback(TItem item)
 
     private async Task OnClearValue()
     {
+        SelectedItems.Clear();
+        await TriggerUpdateSelecedItems();
+
         if (OnClearAsync != null)
         {
             await OnClearAsync();
@@ -302,4 +375,51 @@ private async Task OnClearValue()
     /// <para lang="en">Query Method</para>
     /// </summary>
     public Task QueryAsync() => _table.QueryAsync();
+
+    private IEnumerable<TItem> GetDisplayItems()
+    {
+        IEnumerable<TItem> items = SelectedItems;
+
+        if (MultiSelectedItemsMaxDisplayCount > 0)
+        {
+            items = SelectedItems.Take(MultiSelectedItemsMaxDisplayCount);
+        }
+        return items;
+    }
+
+    /// <summary>
+    /// <para lang="zh">触发删除选项方法 由 Javascript 调用</para>
+    /// <para lang="en">Trigger remove item method, called by Javascript</para>
+    /// </summary>
+    /// <param name="index">
+    /// <para lang="zh">要删除的选项索引</para>
+    /// <para lang="en">The index of the item to remove</para>
+    /// </param>
+    [JSInvokable]
+    public async Task TriggerRemoveItem(int index)
+    {
+        if (index >= 0 && index < SelectedItems.Count)
+        {
+            var item = SelectedItems[index];
+            SelectedItems.Remove(item);
+
+            await TriggerUpdateSelecedItems();
+        }
+    }
+
+    /// <summary>
+    /// <para lang="zh">更新 <see cref="SelectedItems"/> 参数方法 由 Javascript 调用</para>
+    /// <para lang="en">Update <see cref="SelectedItems"/> parameter method, called by Javascript</para>
+    /// </summary>
+    [JSInvokable]
+    public async Task TriggerUpdateSelecedItems()
+    {
+        if (IsMultipleSelect)
+        {
+            if (SelectedItemsChanged.HasDelegate)
+            {
+                await SelectedItemsChanged.InvokeAsync(SelectedItems);
+            }
+        }
+    }
 }
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
index 9ba1689f927..9b96539d770 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
@@ -1,8 +1,9 @@
-import { getWidth } from "../../modules/utility.js"
+import { getWidth } from "../../modules/utility.js"
 import Data from "../../modules/data.js"
+import EventHandler from "../../modules/event-handler.js"
 import Popover from "../../modules/base-popover.js"
 
-export function init(id) {
+export function init(id, invoke) {
     const el = document.getElementById(id)
     if (el == null) {
         return
@@ -37,6 +38,9 @@ export function init(id) {
                 dropdown.style.removeProperty('visibility');
                 dropdown.style.removeProperty('position');
             }
+        },
+        hideCallback: async () => {
+            await invoke.invokeMethodAsync("TriggerUpdateSelecedItems");
         }
     });
 
@@ -50,7 +54,25 @@ export function init(id) {
         observer
     }
 
-    Data.set(id, selectTable)
+    Data.set(id, selectTable);
+
+    EventHandler.on(el, 'click', '.multi-select-close', e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const disabled = el.classList.contains('disabled');
+        if (disabled) {
+            return;
+        }
+
+        const index = e.delegateTarget.getAttribute('data-bb-index');
+        if (index) {
+            const value = parseInt(index);
+            if (value > -1) {
+                invoke.invokeMethodAsync("TriggerRemoveItem", value);
+            }
+        }
+    });
 }
 
 export function close(id) {
@@ -66,5 +88,6 @@ export function dispose(id) {
     if (data) {
         data.observer.disconnect();
         Popover.dispose(data.popover)
+        EventHandler.off(data.el, 'click');
     }
 }
diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
index ed6b39a591d..888e55cd93b 100644
--- a/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/SelectTable.razor.scss
@@ -1,4 +1,11 @@
 .select-table {
+    --bb-select-table-item-width: 110px;
+    --bb-select-table-item-bg-color: rgba(var(--bs-body-color-rgb), .15);
+    --bb-select-table-item-hover-bg-color: rgba(var(--bs-body-color-rgb), .3);
+    --bb-select-table-item-padding: 2px 6px;
+    --bb-select-table-item-gap: 3px;
+    --bb-select-table-item-count-bg-color: var(--bb-select-table-item-bg-color);
+
     .dropdown-toggle {
         .is-display {
             cursor: pointer;
@@ -10,6 +17,66 @@
             background-color: var(--bs-secondary-bg);
             cursor: not-allowed;
         }
+
+        .multi-select-items {
+            background-color: var(--bs-secondary-bg);
+            cursor: not-allowed;
+        }
+    }
+
+    &:not(.disabled) .multi-select-items .multi-select-close:hover {
+        background-color: var(--bb-select-table-item-hover-bg-color);
+    }
+
+    .multi-select-items {
+        --bb-select-padding: 3px 0.375rem;
+        --bb-select-max-height: 65px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--bb-select-table-item-gap);
+        max-height: var(--bb-select-max-height);
+        overflow: hidden;
+
+        .multi-select-item-group-count,
+        .multi-select-item-group span {
+            border: solid 1px var(--bs-border-color);
+            border-radius: var(--bs-border-radius);
+            padding: var(--bb-select-table-item-padding);
+        }
+
+        .multi-select-item-group-count {
+            background-color: var(--bb-select-table-item-count-bg-color);
+        }
+
+        .multi-select-item-group {
+            display: inline-flex;
+            position: relative;
+
+            span {
+                background-color: var(--bb-select-table-item-bg-color);
+            }
+
+            .multi-select-close {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                margin-inline-end: -1px;
+                transition: color .3s linear, background-color .3s linear;
+            }
+
+            .multi-select-item {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                white-space: nowrap;
+                max-width: var(--bb-select-table-item-width);
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        .multi-select-item-ph {
+            padding: 3px 6px;
+            color: #999;
+        }
     }
 }
 
diff --git a/test/UnitTest/Components/SelectTableTest.cs b/test/UnitTest/Components/SelectTableTest.cs
index df1ab6efe09..fbf72f52506 100644
--- a/test/UnitTest/Components/SelectTableTest.cs
+++ b/test/UnitTest/Components/SelectTableTest.cs
@@ -606,6 +606,86 @@ public void EmptyTemplate_OK()
         cut.Contains("<div class=\"empty\"><div class=\"empty-telemplate\">empty-template</div></div>");
     }
 
+    [Fact]
+    public async Task IsMultipleSelect_Ok()
+    {
+        var localizer = Context.Services.GetRequiredService<IStringLocalizer<Foo>>();
+        var items = Foo.GenerateFoo(localizer);
+        var selectedItems = new List<Foo>()
+        {
+            items[0], items[1], items[2], items[3]
+        };
+        var cut = Context.Render<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<SelectTable<Foo>>(pb =>
+            {
+                pb.Add(a => a.OnQueryAsync, options =>
+                {
+                    return Task.FromResult(new QueryData<Foo>()
+                    {
+                        Items = items,
+                        IsAdvanceSearch = true,
+                        IsFiltered = true,
+                        IsSearch = true,
+                        IsSorted = true
+                    });
+                });
+                pb.Add(a => a.IsMultipleSelect, true);
+                pb.Add(a => a.SelectedItems, selectedItems);
+                pb.Add(a => a.MultiSelectedItemsMaxHeight, "30px");
+                pb.Add(a => a.MultiSelectedItemsMaxDisplayCount, 2);
+                pb.Add(a => a.MultiSelectedItemsMaxDisplayCountColor, Color.Warning);
+                pb.Add(a => a.SelectedItemsChanged, EventCallback.Factory.Create<List<Foo>>(this, items => selectedItems = items));
+                pb.Add(a => a.GetTextCallback, foo => foo.Name);
+                pb.Add(a => a.TableColumns, foo => builder =>
+                {
+                    builder.OpenComponent<TableColumn<Foo, string>>(0);
+                    builder.AddAttribute(1, "Field", "Name");
+                    builder.AddAttribute(2, "FieldExpression", Utility.GenerateValueExpression(foo, "Name", typeof(string)));
+                    builder.CloseComponent();
+                });
+            });
+        });
+
+        cut.Contains("multi-select-items");
+        cut.Contains("multi-select-item-group-count bg-warning");
+        cut.Contains("+ 2");
+        cut.Contains("--bb-select-max-height: 30px;");
+        cut.DoesNotContain("--bb-select-table-item-width: ");
+
+        var table = cut.FindComponent<SelectTable<Foo>>();
+        Assert.NotNull(table);
+
+        table.Render(pb =>
+        {
+            pb.Add(a => a.MultiSelectedItemMaxWidth, "120px");
+        });
+        cut.Contains("--bb-select-table-item-width: 120px;");
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(0));
+        Assert.Equal(3, selectedItems.Count);
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(0));
+        Assert.Equal(2, selectedItems.Count);
+
+        cut.Render();
+        cut.DoesNotContain("multi-select-item-group-count");
+        cut.DoesNotContain("bg-warning");
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(-1));
+        Assert.Equal(2, selectedItems.Count);
+
+        await cut.InvokeAsync(() => table.Instance.TriggerRemoveItem(2));
+        Assert.Equal(2, selectedItems.Count);
+        cut.DoesNotContain("multi-select-item-ph");
+
+        table.Render(pb =>
+        {
+            pb.Add(a => a.SelectedItems, null);
+        });
+        cut.Contains("multi-select-item-ph");
+    }
+
     private static Task<QueryData<Foo>> OnFilterQueryAsync(QueryPageOptions options, IEnumerable<Foo> _filterItems)
     {
         _filterItems = _filterItems.Where(options.ToFilterFunc<Foo>());