实现如下图所示的功能在左侧可选职位中单选或多选某些职位点击把其移动到已选职位中则可选职位中的该项删除同样也可实现把已选职位的职业选择到可选职位中。html head title职位选择title script src=vuejsscript head body div id=app 可选职位
<html>
<head>
<title>职位选择</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
可选职位 已选职位<br>
<select v-model="job" multiple="true">
<option v-for="jobvalue in joblist" :value="jobvalue">{{jobvalue}}</option><!--value不能为空-->
</select>
<button @click="right">>>></button>
<button @click="left"><<<</button>
<select v-model="selectjob" multiple="multiple">
<option v-for="lista in myjob" :value="lista">{{lista}}</option>
</select>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
joblist:['前端工程师','Java程序员','软件测试师'],//可选职位列表
job:[],//可选职位选中的项
myjob:[],//已选职位列表
selectjob:[], //已选职位选中的项
},
methods:{
right:function(){
for(var i=0;i<this.job.length;i++){
this.myjob.push(this.job[i]);
var index=this.joblist.indexOf(this.job[i]);
this.joblist.splice(index,1);
}
this.job=[];
},
left:function(){
for(var i=0;i<this.selectjob.length;i++){
this.joblist.push(this.selectjob[i]);
var index=this.myjob.indexOf(this.selectjob[i]);
this.myjob.splice(index,1);
}
this.selectjob=[];
},
}
})
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/efyo 著作权归作者所有。请勿转载和采集!