当前位置: 代码迷 >> JavaScript >> select 上下多选 demo js
  详细解决方案

select 上下多选 demo js

热度:821   发布时间:2012-10-08 19:54:56.0
select 左右多选 demo js
<script type="text/javascript">
// submit
     $(function(){
       $("#id_save").click(function(){
        if(chkform()){
        // alert('submit()');
        $("form").attr("action","<%=request.getContextPath()%>/tmlportal/tml_saveUserDefinedTmlGroupMember.action");
        $("form").submit();
     }
    else{
     return false;
   }
    });
   });
    //check  the input value;
function chkform() {
var selFlag = false;
$("#rightmodel option").each(function(){
if($(this).val() != ""){
// if  this value is not null, attr this selected to selected;
$(this).attr("selected","selected");
selFlag = true;
}
});
//
if(!selFlag) {
alert("必须选择一个终端!");
return false;
}
return selFlag;

}
// remove  left  option to right;
function leftToRight(){
   //leftmodel
var leftmodel = document.getElementById("leftmodel");
//rightmodel
var rightmodel = document.getElementById("rightmodel");
if(leftmodel.length>0){
    // 判读 有没有被选中一个 option。
var leftSelectedIndex = leftmodel.selectedIndex;
if(leftSelectedIndex<0){
option = leftmodel.options(0);
rightmodel.appendChild(option);
}

if(leftSelectedIndex>=0){
  //leftmodel length
    var leftLength = leftmodel.length;
    var i=0;
       for(i;i<leftLength;i++){
         if(leftmodel[i].selected){
           option = leftmodel.options(i);
           rightmodel.appendChild(option);
           repeat();
           // 当移除 选中时,对象长度减少一个。
           leftLength--;
           i--;
         }
        
       }
      
   }//if leftSelectedIndex>=0

// rightmodel.selectedIndex=-1;
this.repeat();

}// 长度 大于0


    }
    // remove all left options  to right sw
function leftToRightAll(){
var leftmodel = document.getElementById("leftmodel");
var rightmodel = document.getElementById("rightmodel");
while(leftmodel.length>0){
rightmodel.appendChild(leftmodel.options(0));
}
this.repeat();
}
// remove right option to left;
function rightToLeft(){

var leftmodel = document.getElementById("leftmodel");
var rightmodel = document.getElementById("rightmodel");
if(rightmodel.length>0){

var rightSelectedIndex = rightmodel.selectedIndex;
if(rightSelectedIndex<0){
rightSelectedIndex=0;
option = rightmodel.options(rightSelectedIndex);
leftmodel.appendChild(option);
}
if(rightSelectedIndex>=0){
     //leftmodel length
    var rightLength = rightmodel.length;
    var i=0;
       for(i;i<rightLength;i++){
         if(rightmodel[i].selected){
           option = rightmodel.options(i);
           leftmodel.appendChild(option);
           repeat2();
           // 当移除 选中时,对象长度减少一个。
           rightLength--;
           i--;
         }
        
       }
}

// leftmodel.selectedIndex=-1;
this.repeat2();

}// rightmodel.length>0

}
// remove  all right options to  left;
function rightToLeftAll(){
var leftmodel = document.getElementById("leftmodel");
var rightmodel = document.getElementById("rightmodel");
while(rightmodel.length>0){
leftmodel.appendChild(rightmodel.options(0));
}
repeat2();
}

  // remove repets
    function repeat(){
     var middlemodel = document.getElementById("rightmodel");
     var ops=middlemodel.options;
     for(var i=0;i<ops.length;i++){
     for(var j=i+1;j<ops.length;j++){
     if(ops[i].value==ops[j].value){
      middlemodel.removeChild(ops[j]);
     j=j-1;   
     }   
     }
     }    
     }
 
    // remove repets two
    function repeat2(){
     var middlemodel = document.getElementById("leftmodel");
     var ops=middlemodel.options;
     for(var i=0;i<ops.length;i++){
     for(var j=i+1;j<ops.length;j++){
     if(ops[i].value==ops[j].value){
      middlemodel.removeChild(ops[j]);
     j=j-1;   
     }   
     }
     }    
     }
    
// back
$(function(){
$("#id_back").click(function(){
window.history.back();
});
}); 

// tml by brand
$("#id_brand").change(function(){
   var brandindex = $(this).val();
   $.post("<%=request.getContextPath()%>/tmlportal/tml_queryTmlBybrand.action",{brandindex:brandindex},function(data){
     var $tmlObj = $("#leftmodel").empty();
     $.each(data,function(index,content){
    var $terminalindex = content['terminalindex'];
    var $terminalmodelname = content['terminalmodelname'];
     var option = $("<option value="+$terminalindex+">"+$terminalmodelname+"</option>").appendTo($tmlObj);;
    //
    // tmlObj.appendChild(option);
    });
   },'json');
});
  // form's history value;
$(document).ready(function(){
    var brandindex = $("#brandindexBak").val();
    $("#id_brand option[value = "+brandindex+"]").attr("selected","selected");
    var status = ${mtmlGroup.status}
   $("#id_status option[value = "+status+"]").attr("selected","selected");
   //
   if(!clearNullOption()){
     $("#rightmodel").empty();
   }
});
//query  by  tmlName
$("#query").click(function(){
var terminalmodelname = $("#id_terminalmodelname").val();
$.post("<%=request.getContextPath()%>/tmlportal/tml_queryTmlByName.action",{terminalmodelname:terminalmodelname},function(data){
     var $tmlObj = $("#leftmodel").empty();
     $.each(data,function(index,content){
    var $terminalindex = content['terminalindex'];
    var $terminalmodelname = content['terminalmodelname'];
     var option = $("<option value="+$terminalindex+">"+$terminalmodelname+"</option>").appendTo($tmlObj);;
    });
   },'json');
});
// clear form
$("#clear").click(function(){
$("input[name='terminalmodelname']").val('');
});
// 加载时,判断 此终端组 是否有终端,如果没有则将  空的option  给清空了。
function clearNullOption() {
var selFlag = false;
$("#rightmodel option").each(function(){
if($(this).val() != ""){
$(this).attr("selected","selected");
selFlag = true;
}
});
//
if(!selFlag) {
return false;
}
return selFlag;
}
  // 回车事件 查询 功能。
    // 回车事件 查询 功能。
  $(document).keydown(function(e){
   if(e.keyCode==13){ //当按键是回车
     var act = document.activeElement.id;//获得当前获得焦点控件的ID 
     switch(act)
     {
     case 'id_terminalmodelname':  $("#query").click();  break;
    //  default :  $("#id_query").click(); break;
     }
  }       
});
</script>
  相关解决方案