How to implement province and city selection function in uniapp-uni-app-php.cn

Home

Web Front-end

uni-app

How to implement province and city selection function in uniapp

Jul 04, 2023 am 09:09 AM

uniapp Province City District Select function

uni-app is a cross-platform development framework based on Vue.js. We often need to implement the function of selecting provinces and cities during development. This article will introduce how to use some components and plug-ins of uni-app to realize the province and city selection function.

First, we need to prepare a data source for provinces and cities. Commonly used data sources can be JSON files or obtained from backend APIs. Here we demonstrate it in the form of a JSON file.

Create JSON file
We create a data.json file to store province and city data. The content is as follows:

{
  &quot;provinceList&quot;: [
    {
      &quot;name&quot;: &quot;北京市&quot;,
      &quot;cityList&quot;: [
        {
          &quot;name&quot;: &quot;北京市&quot;,
          &quot;districtList&quot;: [&quot;东城区&quot;, &quot;西城区&quot;, &quot;朝阳区&quot;, &quot;丰台区&quot;, &quot;石景山区&quot;, &quot;海淀区&quot;, &quot;门头沟区&quot;, &quot;房山区&quot;, &quot;通州区&quot;, &quot;顺义区&quot;, &quot;昌平区&quot;, &quot;大兴区&quot;, &quot;怀柔区&quot;, &quot;平谷区&quot;, &quot;密云区&quot;, &quot;延庆区&quot;]
        }
      ]
    },
    {
      &quot;name&quot;: &quot;上海市&quot;,
      &quot;cityList&quot;: [
        {
          &quot;name&quot;: &quot;上海市&quot;,
          &quot;districtList&quot;: [&quot;黄浦区&quot;, &quot;徐汇区&quot;, &quot;长宁区&quot;, &quot;静安区&quot;, &quot;普陀区&quot;, &quot;虹口区&quot;, &quot;杨浦区&quot;, &quot;闵行区&quot;, &quot;宝山区&quot;, &quot;嘉定区&quot;, &quot;浦东新区&quot;, &quot;金山区&quot;, &quot;松江区&quot;, &quot;青浦区&quot;, &quot;奉贤区&quot;, &quot;崇明区&quot;]
        }
      ]
    },
    {
      &quot;name&quot;: &quot;广东省&quot;,
      &quot;cityList&quot;: [
        {
          &quot;name&quot;: &quot;广州市&quot;,
          &quot;districtList&quot;: [&quot;荔湾区&quot;, &quot;越秀区&quot;, &quot;海珠区&quot;, &quot;天河区&quot;, &quot;白云区&quot;, &quot;黄埔区&quot;, &quot;番禺区&quot;, &quot;花都区&quot;, &quot;南沙区&quot;, &quot;增城区&quot;, &quot;从化区&quot;]
        },
        {
          &quot;name&quot;: &quot;深圳市&quot;,
          &quot;districtList&quot;: [&quot;罗湖区&quot;, &quot;福田区&quot;, &quot;南山区&quot;, &quot;宝安区&quot;, &quot;龙岗区&quot;, &quot;盐田区&quot;, &quot;龙华区&quot;, &quot;坪山区&quot;, &quot;光明区&quot;, &quot;大鹏新区&quot;]
        }
      ]
    }
  ]
}

Copy after login

Page structure
We create a province and city selection form on the page, the code is as follows:

&lt;template&gt;
  &lt;view&gt;
    &lt;form&gt;
      &lt;picker mode=&quot;selector&quot; range=&quot;{{ province }}&quot; bind:change=&quot;onProvinceChange&quot;&gt;
        &lt;view class=&quot;picker&quot;&gt;
          {{ province[index1] }}
          &lt;text class=&quot;iconfont icon-down&quot;&gt;&lt;/text&gt;
        &lt;/view&gt;
      &lt;/picker&gt;
      &lt;picker mode=&quot;selector&quot; range=&quot;{{ city }}&quot; bind:change=&quot;onCityChange&quot;&gt;
        &lt;view class=&quot;picker&quot;&gt;
          {{ city[index2] }}
          &lt;text class=&quot;iconfont icon-down&quot;&gt;&lt;/text&gt;
        &lt;/view&gt;
      &lt;/picker&gt;
      &lt;picker mode=&quot;selector&quot; range=&quot;{{ district }}&quot; bind:change=&quot;onDistrictChange&quot;&gt;
        &lt;view class=&quot;picker&quot;&gt;
          {{ district[index3] }}
          &lt;text class=&quot;iconfont icon-down&quot;&gt;&lt;/text&gt;
        &lt;/view&gt;
      &lt;/picker&gt;
    &lt;/form&gt;
  &lt;/view&gt;
&lt;/template&gt;

Copy after login

Page logic
We implement the logic of reading and selecting province and city data in the JS file of the page. The code is as follows:

&lt;script&gt;
  export default {
    data() {
      return {
        province: [],
        city: [],
        district: [],
        index1: 0,
        index2: 0,
        index3: 0
      }
    },
    methods: {
      onProvinceChange(e) {
        const index = e.detail.value;
        this.setData({
          province: this.data.provinceList.map(item =&gt; item.name),
          city: this.data.provinceList[index].cityList.map(item =&gt; item.name),
          district: this.data.provinceList[index].cityList[0].districtList,
          index1: index,
          index2: 0,
          index3: 0
        });
      },
      onCityChange(e) {
        const index = e.detail.value;
        this.setData({
          district: this.data.provinceList[this.data.index1].cityList[index].districtList,
          index2: index,
          index3: 0
        });
      },
      onDistrictChange(e) {
        const index = e.detail.value;
        this.setData({
          index3: index
        });
      }
    },
    created() {
      wx.request({
        url: '/data.json',
        success: res =&gt; {
          const { provinceList } = res.data;
          this.setData({
            province: provinceList.map(item =&gt; item.name),
            city: provinceList[0].cityList.map(item =&gt; item.name),
            district: provinceList[0].cityList[0].districtList
          });
        }
      });
    }
  }
&lt;/script&gt;

Copy after login

The above is how to realize province and city selection through uni-app Sample code for the function. By using the picker component of uni-app, we can dynamically update the city and district options based on the selected province. Use wx.request to request the data source in the JS file of the page, and then dynamically update the city and district options based on the selected province.

Hope this example can help you implement the function of selecting provinces and cities in uni-app. Of course, in actual development, you may need to make changes and optimizations according to your own needs. I hope this article can provide you with some ideas and help.

The above is the detailed content of How to implement province and city selection function in uniapp. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn