Skip to content

Select

Select mode, the most traditional and classic application form

Component reference

Referencing components in your project

js
import { RegionSelects, RegionFullSelects } from 'v-region'

Examples

Close city level, only select province

template
<RegionSelects language="en" :city="false" />
Please select

Close area level

template
<RegionSelects language="en" :area="false" />
Please select
Please select
template
<RegionSelects language="en" />
Please select
Please select
Please select

Use full 4-level administrative divisions

template
<RegionFullSelects language="en" />
Please select
Please select
Please select
Please select

Response Data

v-model values
{}
change event response results
{}

Initial value binding

Specify a set of region code values ​​so that the component displays those regions by default

vue
<template>
  <RegionFullSelects language="en" v-model="region" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RegionFullSelects } from 'v-region'
import type { RegionValues } from 'v-region'
const region = ref<RegionValues>({
  province: '350000',
  city: '350100',
  area: '350104',
  town: '350104008'
})
</script>
Please select
Please select
Please select
Please select

Clear/Reset

Specify an object with the value of undefined at each level to clear it

js
region.value = {
  province: undefined,
  city: undefined,
  area: undefined,
  town: undefined
}

WARNING

Passing an undefined value or an empty object {} does not clear

Disabled state

template
<RegionFullSelects
  v-model="values"
  :disabled="true"
/>
Please select
Please select
Please select
Please select

Released under the MIT License.