级联查

AngularJS中

ng-keyup

<div class="form-group" ng-if="vm.manLim">
	<label>网点编码</label>
		<input class="form-control" ng-model="vm.params.siteId" style="width:120px;"ng-keyup="vm.change(vm.params.siteId)">
</div>
<div class="form-group" ng-if="vm.manLim">
	<label>网点名称</label>
		<input type = "text" readonly="readonly" οnfοcus=this.blur() class="form-control" ng-model="vm.params.siteName" >
</div>
<div class="form-group" ng-if="vm.manLim">
	<label>商家</label>
		<select ng-model="vm.params.businessesId" class="form-control">
			<option value="">-请选择-</option>
			<option ng-repeat="x in vm.changes" value="{{x.id}}">{{x.businessesName}}</option>
		</select>
</div>

 //级联查
        vm.change = function(siteId){
        	var promise2 = CustomerStockRookieService.getBusinessesses(siteId);
			promise2.then(function(businesses) {
				vm.changes = businesses;
				if(businesses.length==0){
					vm.params.siteName = "";
				}else{
					vm.params.siteName = businesses[0].siteName;
				}
			},function(){
				vm.changes = "";
				vm.params.siteName = "";
			});
        }


以下是一个简单的示例,使用Vue实现三级联动选择。 HTML: ``` <div id="app"> <select v-model="selectedProvince" @change="onProvinceChange"> <option value="">请选择省份</option> <option v-for="province in provinces" :value="province.id">{{ province.name }}</option> </select> <select v-model="selectedCity" @change="onCityChange" :disabled="!selectedProvince"> <option value="">请选择城市</option> <option v-for="city in cities" :value="city.id">{{ city.name }}</option> </select> <select v-model="selectedDistrict" :disabled="!selectedCity"> <option value="">请选择区域</option> <option v-for="district in districts" :value="district.id">{{ district.name }}</option> </select> </div> ``` JS: ``` new Vue({ el: '#app', data: { provinces: [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广东' }, ], cities: [], districts: [], selectedProvince: '', selectedCity: '', selectedDistrict: '', }, methods: { onProvinceChange() { if (this.selectedProvince) { // 选择省份后,加载对应的城市列表 this.cities = this.getCityListByProvinceId(this.selectedProvince); // 重置选择的城市和区域 this.selectedCity = ''; this.selectedDistrict = ''; } else { this.cities = []; this.districts = []; this.selectedCity = ''; this.selectedDistrict = ''; } }, onCityChange() { if (this.selectedCity) { // 选择城市后,加载对应的区域列表 this.districts = this.getDistrictListByCityId(this.selectedCity); // 重置选择的区域 this.selectedDistrict = ''; } else { this.districts = []; this.selectedDistrict = ''; } }, getCityListByProvinceId(provinceId) { // 根据省份ID获取城市列表的逻辑 // 省份ID为1时,返回北京市和天津市 if (provinceId === 1) { return [ { id: 11, name: '北京市' }, { id: 12, name: '天津市' }, ]; } // 省份ID为2时,返回上海市 if (provinceId === 2) { return [ { id: 21, name: '上海市' }, ]; } // 省份ID为3时,返回广州市、深圳市和珠海市 if (provinceId === 3) { return [ { id: 31, name: '广州市' }, { id: 32, name: '深圳市' }, { id: 33, name: '珠海市' }, ]; } return []; }, getDistrictListByCityId(cityId) { // 根据城市ID获取区域列表的逻辑 // 城市ID为11时,返回海淀区和朝阳区 if (cityId === 11) { return [ { id: 111, name: '海淀区' }, { id: 112, name: '朝阳区' }, ]; } // 城市ID为12时,返回河东区和河西区 if (cityId === 12) { return [ { id: 121, name: '河东区' }, { id: 122, name: '河西区' }, ]; } // 城市ID为21时,返回黄浦区和徐汇区 if (cityId === 21) { return [ { id: 211, name: '黄浦区' }, { id: 212, name: '徐汇区' }, ]; } // 城市ID为31时,返回天河区和越秀区 if (cityId === 31) { return [ { id: 311, name: '天河区' }, { id: 312, name: '越秀区' }, ]; } // 城市ID为32时,返回南山区和福田区 if (cityId === 32) { return [ { id: 321, name: '南山区' }, { id: 322, name: '福田区' }, ]; } // 城市ID为33时,返回香洲区和金湾区 if (cityId === 33) { return [ { id: 331, name: '香洲区' }, { id: 332, name: '金湾区' }, ]; } return []; }, }, }); ``` 在这个示例中,有三个下拉列表,分别用于选择省份、城市和区域。当选择省份后,会根据选中的省份ID加载对应的城市列表。选择城市后,会根据选中的城市ID加载对应的区域列表。这个过程中,选择的省份、城市和区域ID会保存在Vue实例的data属性中的相应变量中,可以用于后续的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值