笔记一下左右两个Select Multiple,多选选择项目后,按钮将相关项目转移到另一边
缘起:
刚好有个需求,需要从现有的备选选单中,挑选一些项目当作条件,于是小喵想要做类似以下的功能:
并使用Vue来处理这样的问题
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue SelectMultiple Left & Right</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div id="App1" class="container">
<div class="row align-items-center">
<div class="col-3">
備選:<br />
<select multiple size="10" v-model="sltcities">
<option v-for="item in cities">{{item.city}}</option>
</select>
</div>
<div class="col-2">
<button v-on:click="CitiesAddToFilter" class="btn btn-primary">→</button>
<br />
<button v-on:click="CitiesRemoveFromFilter" class="btn btn-info">←</button>
</div>
<div class="col-3">
條件:<br />
<select multiple size="10" v-model="sltCityFilter">
<option v-for="city in MDFilter.cities">{{city}}</option>
</select>
</div>
<div class="col-4"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
JS:
let App1=new Vue({
el:'#App1',
data:{
sltcities: [],
sltCityFilter:[],
cities: [],
MDFilter: {
cities: [],
},
},
methods:{
CitiesAddToFilter: function () {
if (!this.MDFilter.cities) {
this.MDFilter.cities = [];
}
this.sltcities.forEach(city => {
//檢查是否已經存在
if (!this.MDFilter.cities.includes(city)) {
//不存在,加入條件、移除備選
this.MDFilter.cities.push(city);
let idx = 0;
this.cities.forEach(itm => {
if (itm.city == city) {
this.cities.splice(idx, 1);
}
idx++;
});
}
});
},
CitiesRemoveFromFilter: function () {
this.sltCityFilter.forEach(sltcity => {
//加入回備選
let tmpCity = {};
tmpCity.city = sltcity;
this.cities.push(tmpCity);
//移除條件:
let idx = 0;
this.MDFilter.cities.forEach(city => {
if (city == sltcity) {
this.MDFilter.cities.splice(idx, 1);
}
idx++;
});
});
},
citiesInit: function () {
this.cities = [
{ city: '臺北市' },
{ city: '基隆市' },
{ city: '宜蘭縣' },
{ city: '新北市' },
{ city: '連江縣' },
{ city: '新竹市' },
{ city: '新竹縣' },
{ city: '桃園市' },
{ city: '苗栗縣' },
{ city: '臺中市' },
{ city: '南投縣' },
{ city: '彰化縣' },
{ city: '嘉義市' },
{ city: '嘉義縣' },
{ city: '雲林縣' },
{ city: '臺南市' },
{ city: '澎湖縣' },
{ city: '金門縣' },
{ city: '高雄市' },
{ city: '屏東縣' },
{ city: '臺東縣' },
{ city: '花蓮縣' },
];
},
},
mounted:function(){
this.citiesInit();
},
});
开始上传测试吧!
来源:oschina
链接:https://my.oschina.net/u/4358286/blog/4460741