diff --git a/web/src/views/database/CreateDatabaseModal.vue b/web/src/views/database/CreateDatabaseModal.vue
index bce1bcc7..8d69aeca 100644
--- a/web/src/views/database/CreateDatabaseModal.vue
+++ b/web/src/views/database/CreateDatabaseModal.vue
@@ -16,11 +16,21 @@ const createModel = ref({
 
 const servers = ref<{ label: string; value: string }[]>([])
 
-const hostType = [
+const hostTypeOptions = [
   { label: $gettext('Local (localhost)'), value: 'localhost' },
   { label: $gettext('All (%)'), value: '%' },
-  { label: $gettext('Specific'), value: '' }
+  { label: $gettext('Specific'), value: 'specific' }
 ]
+const hostType = ref('localhost')
+
+// 监听 hostType 变化，同步到 createModel.host
+watch(hostType, (val) => {
+  if (val !== 'specific') {
+    createModel.value.host = val
+  } else {
+    createModel.value.host = ''
+  }
+})
 
 const handleCreate = () => {
   useRequest(() => database.create(createModel.value)).onSuccess(() => {
@@ -110,14 +120,14 @@ watch(
       </n-form-item>
       <n-form-item v-if="createModel.create_user" path="host-select" :label="$gettext('Host')">
         <n-select
-          v-model:value="createModel.host"
+          v-model:value="hostType"
           @keydown.enter.prevent
           :placeholder="$gettext('Select host')"
-          :options="hostType"
+          :options="hostTypeOptions"
         />
       </n-form-item>
       <n-form-item
-        v-if="createModel.create_user && createModel.host === ''"
+        v-if="createModel.create_user && hostType === 'specific'"
         path="host"
         :label="$gettext('Specific Host')"
       >
diff --git a/web/src/views/database/CreateUserModal.vue b/web/src/views/database/CreateUserModal.vue
index 1e07ba38..b7471d3d 100644
--- a/web/src/views/database/CreateUserModal.vue
+++ b/web/src/views/database/CreateUserModal.vue
@@ -16,11 +16,21 @@ const createModel = ref({
 
 const servers = ref<{ label: string; value: string }[]>([])
 
-const hostType = [
+const hostTypeOptions = [
   { label: $gettext('Local (localhost)'), value: 'localhost' },
   { label: $gettext('All (%)'), value: '%' },
-  { label: $gettext('Specific'), value: '' }
+  { label: $gettext('Specific'), value: 'specific' }
 ]
+const hostType = ref('localhost')
+
+// 监听 hostType 变化，同步到 createModel.host
+watch(hostType, (val) => {
+  if (val !== 'specific') {
+    createModel.value.host = val
+  } else {
+    createModel.value.host = ''
+  }
+})
 
 const handleCreate = () => {
   useRequest(() => database.userCreate(createModel.value)).onSuccess(() => {
@@ -93,13 +103,13 @@ watch(
         </n-form-item>
         <n-form-item path="host-select" :label="$gettext('Host (MySQL only)')">
           <n-select
-            v-model:value="createModel.host"
+            v-model:value="hostType"
             @keydown.enter.prevent
             :placeholder="$gettext('Select host')"
-            :options="hostType"
+            :options="hostTypeOptions"
           />
         </n-form-item>
-        <n-form-item v-if="createModel.host === ''" path="host" :label="$gettext('Specific Host')">
+        <n-form-item v-if="hostType === 'specific'" path="host" :label="$gettext('Specific Host')">
           <n-input
             v-model:value="createModel.host"
             type="text"