select2二级联动存在默认值的情况下第二级默认值有时会加载不上

源代码如下:

$(function () {

            var level1 =@ViewBag.level1;
            var level2=@ViewBag.level2;
            $.post("/service/getcustomersortlist", { parent: 0 }, function (data) {
                $("#level1").select2({
                    data:data
                });
                //设置初始值
                if (level1 != -1)
                {
                    $("#level1").val(level1).trigger("change"); 
                }
                
                $.post("/service/getcustomersortlist", { parent: $("#level1").val() }, function (data) {
                    $("#level2").select2({
                        data: data
                    });
                    if (level2 != -1)
                    {
                        $("#level2").val(level2).trigger("change"); 
                    }
                    
                });
            });

           
        });

经过反复测试,如果想改变这种情况,二级加载需要使用延迟才能避免这种情况,并且延迟500毫秒还不成,需要延迟1000毫秒才可以

这行代码:

$("#level2").val(level2).trigger("change"); 

改为:

setTimeout($("#level2").val(level2).trigger("change"),1000); 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的陕西省市区二级联动的筛选列表的实现,使用Vue3和TypeScript编写: 首先,创建一个`Area`接口,用来表示省市区的数据结构: ```typescript interface Area { name: string; code: string; children: Area[]; } ``` 然后,创建一个`AreaSelector`组件,用来实现省市区的筛选列表: ```vue <template> <div> <select v-model="selectedProvince" @change="onProvinceChange"> <option value="">请选择</option> <option v-for="province in provinces" :value="province.code">{{ province.name }}</option> </select> <select v-model="selectedCity" @change="onCityChange" :disabled="!selectedProvince"> <option value="">请选择</option> <option v-for="city in cities" :value="city.code">{{ city.name }}</option> </select> <select v-model="selectedDistrict" :disabled="!selectedCity"> <option value="">请选择</option> <option v-for="district in districts" :value="district.code">{{ district.name }}</option> </select> </div> </template> <script lang="ts"> import { defineComponent, ref, watch } from 'vue'; interface Props { areas: Area[]; } export default defineComponent({ props: { areas: { type: Array as () => Area[], required: true, }, }, setup(props: Props) { const selectedProvince = ref(''); const selectedCity = ref(''); const selectedDistrict = ref(''); const provinces = props.areas; const cities = ref<Area[]>([]); const districts = ref<Area[]>([]); function onProvinceChange() { const province = provinces.find((p) => p.code === selectedProvince.value); cities.value = province?.children ?? []; selectedCity.value = ''; selectedDistrict.value = ''; } function onCityChange() { const city = cities.value.find((c) => c.code === selectedCity.value); districts.value = city?.children ?? []; selectedDistrict.value = ''; } watch(selectedProvince, onProvinceChange); watch(selectedCity, onCityChange); return { selectedProvince, selectedCity, selectedDistrict, provinces, cities, districts, }; }, }); </script> ``` 在上面的代码中,我们首先定义了一个`AreaSelector`组件,它接收一个`areas`属性,表示所有的省市区数据。然后,在`setup`函数中,我们定义了一些响应式变量,包括当前选中的省市区,以及根据选中的省市计算出来的城市和区县列表。 接下来,我们定义了`onProvinceChange`和`onCityChange`两个函数,用来在选中省市时更新城市和区县列表。具体来说,当选中省份时,我们找到对应的省份数据,然后将其子级城市列表赋给`cities`变量,并将选中的城市和区县重置为默认。当选中城市时,我们找到对应的城市数据,然后将其子级区县列表赋给`districts`变量,并将选中的区县重置为默认。 最后,在组件的模板中,我们使用`<select>`元素实现了省市区的下拉列表,并将选中的绑定到响应式变量上。同时,我们使用`@change`事件和`:disabled`属性来控制城市和区县列表的显示和隐藏。 使用这个组件的时候,我们需要先将所有的省市区数据传递给它,然后通过`v-model`指令绑定选中的省市区,例如: ```vue <template> <div> <area-selector :areas="areas" v-model="selectedAreaCode" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import AreaSelector from './AreaSelector.vue'; import areasData from './areas.json'; export default defineComponent({ components: { AreaSelector, }, setup() { const selectedAreaCode = ref(''); const areas = areasData as Area[]; return { selectedAreaCode, areas, }; }, }); </script> ``` 上面的代码中,我们通过`<area-selector>`标签使用了`AreaSelector`组件,并将所有的省市区数据传递给它。然后,我们使用`v-model`指令将选中的省市区代码绑定到`selectedAreaCode`变量上,以便于在其他地方使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值