标签：双向选择
<div class="modal fade" id="distribute" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">为{{add_group_Name}}分配功能</h4>
</div>
<div class="modal-body" style="max-height:400px">
<div class="row" style="padding-bottom:5px;">
<div class="col-xs-5">
<h5>可分配功能</h5>
</div>
<div class="col-xs-2 text-center">
<h5>操作</h5>
</div>
<div class="col-xs-5">
<h5>已分配功能</h5>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<select name="s1" size="10" multiple="multiple" id="s1" class="form_selectgro">
</select>
</div>
<div class="col-xs-2 text-center">
<button type="button" name="addall" id="addall" value=""
class="btn btn-info mb15">
全选 <i class="fa fa-fast-forward"></i>
</button>
<br />
<button type="button" name="add" id="add" value=""
class="btn btn-primary mb15">
选择 <i class="fa fa-step-forward"></i>
</button>
<br />
<button type="button" name="remove" id="remove"
class="btn btn-danger mb15">
<i class="fa fa-step-backward"></i> 移除
</button>
<br />
<button type="button" name="removeall" id="removeall" value=""
class="btn btn-danger mb15">
<i class="fa fa-fast-backward"></i> 全删
</button>
<br /> <input type="button" name="s2up" id="s2up"
value="↑ 上移" class=‘btn btn-primary mb15‘ /><br /> <input
type="button" name="s2down" id="s2down" value="↓ 下移"
class=‘btn btn-primary mb15‘ />
</div>
<div class="col-xs-5">
<select name="s2" size="10" multiple="multiple" id="s2" class="form_selectAdd">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消
</button>
<button type="button" class="btn btn-info " ng-click="go_allot_Group();">确定</button>
</div>
</div>
</div>
</div> //功能分配菜单
注释这行为了避免左选右选会多带过去数据 so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$scope.AddCollectionAssureId = function(){
// $("#s1 option:first,#s2 option:first").attr("selected",true);
$("#s1").dblclick(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
// so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s2").append(so);
});
$("#s2").dblclick(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
// so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s1").append(so);
});
$("#add").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
// so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s2").append(so);
});
$("#remove").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
// so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
$("#s1").append(so);
});
$("#addall").click(function(){
$("#s2").append($("#s1 option").attr("selected",true));
});
$("#removeall").click(function(){
$("#s1").append($("#s2 option").attr("selected",true));
});
$("#s1up").click(function(){
var so = $("#s1 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s1down").click(function(){
var alloptions = $("#s1 option");
var so = $("#s1 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(var i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
$("#s2up").click(function(){
var so = $("#s2 option:selected");
if(so.get(0).index!=0){
so.each(function(){
$(this).prev().before($(this));
});
}
});
$("#s2down").click(function(){
var alloptions = $("#s2 option");
var so = $("#s2 option:selected");
if(so.get(so.length-1).index!=alloptions.length-1){
for(var i=so.length-1;i>=0;i--)
{
var item = $(so.get(i));
item.insertAfter(item.next());
}
}
});
};数据渲染页面去重
$("#s1 option").remove();
$("#s2 option").remove();
var CoreUrl = new coreUrl({"transCode":"B000200","funState":‘1‘,});
CoreUrl.$save(function(result){
var a =result.rows;
var CoreUrl2 = new coreUrl({"transCode":"B000405","groupId": $scope.add_group_id});
CoreUrl2.$save(function(data){
var n =data.row;
if(n!=undefined){
for(var i=0;i<n.length;i++){
$("#s2").append("<option value=‘"+n[i].funId+"‘>"+n[i].funDisplayName+"</option>");
}
//查找重复数据
var isrep;
for(var j =0;j<a.length;j++){
isrep = false;
for(var i=0;i<n.length;i++){
if(n[i].funId==a[j].funId){
isrep = true;
break;
}
}
if(!isrep){
$("#s1").append("<option value=‘"+a[j].funId+"‘>"+a[j].funDisplayName+"</option>");
}
};
}else{
for(var i=0;i<a.length;i++){
$("#s1").append("<option value=‘"+a[i].funId+"‘>"+a[i].funDisplayName+"</option>");
}
}
},"json");
},"json");本文出自 “紫枫5966” 博客，请务必保留此出处http://zifeng5966.blog.51cto.com/8763113/1947646
标签：双向选择
原文地址：http://zifeng5966.blog.51cto.com/8763113/1947646
