diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index 3de2d2acc..0de45df66 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -125,7 +125,12 @@
                             <el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
                                 <el-option :label="$t('commons.table.all')" value="all" />
                                 <div v-for="item in appOptions" :key="item.id">
-                                    <el-option :label="item.key + ' [' + item.name + ']'" :value="item.id + ''" />
+                                    <el-option :value="item.id + ''">
+                                        <span>{{ item.name }}</span>
+                                        <el-tag class="tagClass">
+                                            {{ item.key }}
+                                        </el-tag>
+                                    </el-option>
                                 </div>
                             </el-select>
                         </el-form-item>
@@ -135,12 +140,15 @@
                         <el-form-item :label="$t('cronjob.database')" prop="dbName">
                             <el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
                                 <el-option :label="$t('commons.table.all')" value="all" />
-                                <el-option
-                                    v-for="item in mysqlInfo.dbs"
-                                    :key="item.id"
-                                    :label="item.database + ' [' + item.name + ']'"
-                                    :value="item.id + ''"
-                                />
+                                <el-option v-for="item in mysqlInfo.dbs" :key="item.id" :value="item.id + ''">
+                                    <span>{{ item.name }}</span>
+                                    <el-tag class="tagClass">
+                                        {{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
+                                    </el-tag>
+                                    <el-tag class="tagClass">
+                                        {{ item.database }}
+                                    </el-tag>
+                                </el-option>
                             </el-select>
                         </el-form-item>
                     </div>
@@ -609,4 +617,10 @@ defineExpose({
 .selectClass {
     width: 100%;
 }
+.tagClass {
+    float: right;
+    margin-right: 10px;
+    font-size: 12px;
+    margin-top: 5px;
+}
 </style>
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index cbcf23628..7e08212ab 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -27,11 +27,12 @@
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">
-                            <el-option
-                                v-if="item.from === 'local'"
-                                :value="item.database"
-                                :label="item.database + ' [' + (item.type === 'mysql' ? 'MySQL' : 'MariaDB') + ']'"
-                            ></el-option>
+                            <el-option v-if="item.from === 'local'" :value="item.database">
+                                <span>{{ item.database }}</span>
+                                <el-tag class="tagClass">
+                                    {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
+                                </el-tag>
+                            </el-option>
                         </div>
                         <el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
                             {{ $t('database.goInstall') }}
@@ -39,11 +40,12 @@
                     </el-option-group>
                     <el-option-group :label="$t('database.remote')">
                         <div v-for="(item, index) in dbOptionsRemote" :key="index">
-                            <el-option
-                                v-if="item.from === 'remote'"
-                                :value="item.database"
-                                :label="item.database + ' [' + (item.type === 'mysql' ? 'MySQL' : 'MariaDB') + ']'"
-                            ></el-option>
+                            <el-option v-if="item.from === 'remote'" :value="item.database">
+                                <span>{{ item.database }}</span>
+                                <el-tag class="tagClass">
+                                    {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
+                                </el-tag>
+                            </el-option>
                         </div>
                         <el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
                             {{ $t('database.createRemoteDB') }}
@@ -563,6 +565,12 @@ onMounted(() => {
 .jumpAdd {
     margin-top: 10px;
     margin-left: 15px;
+    margin-bottom: 5px;
     font-size: 12px;
 }
+.tagClass {
+    float: right;
+    font-size: 12px;
+    margin-top: 5px;
+}
 </style>