省市区三级联动 tab选中

最新推荐文章于 2023-11-02 11:07:16 发布

少年你好，我是π。。。

最新推荐文章于 2023-11-02 11:07:16 发布

阅读量562

点赞数 1

分类专栏：互联网，移动开发文章标签：省市区三级联动 tab 选择城市

本文链接：https://blog.csdn.net/qq_43528934/article/details/92838162

版权

本文展示了如何使用HTML、CSS和JavaScript实现省市区三级联动的选择效果，并提供了参考插件链接。通过点击切换左边侧边栏选择城市，同时支持园区列表的展示和隐藏，实现了城市与园区的联动交互。

摘要由CSDN通过智能技术生成

想要效果参考图

在这里插入图片描述

解决中所参照的插件

https://dwqs.github.io/vue-area-linkage/（第三方插件）
http://www.jq22.com/jquery-info13740（jquery22中的一个插件）

贴码：

html：

<dl id="person">

            <dd>
              <s>试听中心</s>
              <input type="tel" name="CityName" id="CityName" v-model="parkName" v-validate="'required'" class="input" @click='clickButtonCity'>
              <span v-show="errors.has('CityName')" class="error">请选择园区</span>

              
            </dd>

            <!-- 所在城市选择列表 -->
            <div id="province">
                <dl id="cityid">
                    <!-- 左侧点击列表 -->
                    <dt @click="clickList"> 
                        <span class="c" data-index='0'>推荐</span> 
                        <span class="" data-index='1'>ABCD</span>

                        <span class="" data-index='2'>EFGH</span> 
                        <span class="" data-index='3'>IJKL</span>
                        <span class="" data-index='4'>MNOP</span>
                        <span class="" data-index='5'>QRST</span> 
                        <span class="" data-index='6'>UVW</span> 
                        <span class="" data-index='7'>XYZ</span> 
                    </dt>
                    <!-- tab点击切换内容 -->
                    <dd>
                        <!-- 推荐 -->
                        <ul @click="clickListChild" style="display:block"  v-if="index==0">
                            <li><i data-city="1000" @click="serachCurrentCity(CurrentPosition.district,CurrentPosition.city,CurrentPosition.province)">{
  {CurrentPosition.city?CurrentPosition.district:CurrentPosition.province}}</i></li>
                            <!-- <li><i data-city="1000" @click="serachCurrentCity(CurrentPosition.district,CurrentPosition.city,CurrentPosition.province)">{
  {CurrentPosition.district?CurrentPosition.district:CurrentPosition.city}}</i></li> -->
                        </ul>
                        <!-- abcd -->
                        <ul @click="clickListChild" v-for="(level1,index) in AllCityList" :key='index' style="display:block" v-show="(index+1) == num">