首页  »   Web前端

<select> 上下移动

网友分享于:2013-10-11  浏览:9次
<select> 左右移动

<html>
    <head>
    <style type="text/css">
     p {
          padding-top: 50px;
          padding-left: 1%;
        }
     select{
             width: 390px;
             height:500px;
     }
    </style>

 

<script type="text/javascript">
var instcode="";
var kxurl="";
var dxurl="";
 function distinctAry(ary){
      var data=[];
      for(var i=0;i<ary.length-1;i++){
         var found=false;
         for(var j=i+1;j<ary.length;j++){
             if(ary[i]==ary[j]){
                ary[j]=-1
                found=true
             }}
         if(found)
             ary[i]=-1
      }
      for(var i=0;i<ary.length;i++){
         if(ary[i]!=-1)
            data.push(ary[i])
      }
      return data;
   }

    $(function() {
       $('#p').css({'width':$(document).width(),"background-color": "#F0F0F0",'height':$(document).height() });
       $('#maintain').css({'width':$(document).width(),'height':$(document).height()*0.18 });
       $('.below').css({'height':$(document).height()*0.9 })
    })

    $(function(){
            $('#whinput').combobox({
                url:"wh.jsp?_t=(new Date())+'s'",
                valueField:'INSTCODE',
                textField:'NAME',
                panelWidth:'300px',
                onSelect:function(){
                instcode=$('#whinput').combobox('getValue');
                $.getJSON('drag.jsp',{'type':'kx','instcode':instcode,'_t':(new Date()+'s')},function(data){
                          $("#kcx>option").remove();
                          for(var i=0;i<data.len;i++){
                         $("#kcx").append("<option value='"+data.rows[i].CODE+"'>"+data.rows[i].NAME+"</option>");
                          }
                })
               
                $.getJSON('drag.jsp',{'type':'dx','instcode':instcode,'_t':(new Date()+'s')},function(data){
                          $("#dx>option").remove();
                          for(var i=0;i<data.len;i++){
                         $("#dx").append("<option value='"+data.rows[i].CODE+"'>"+data.rows[i].NAME+"</option>");
                          }
                  })
                }
            });
            $('#whinput').css('width','300');
})
       
function left(){
     var selectedValue = "";
     var selectedText = "";         
     var objSelect = document.all('kcx');
     var len=objSelect.options.length;
     var delmark=new Array();
     for(var i=0;i<len;i++)  
     {
         if(objSelect.options[i].selected==true){
            selectedValue += objSelect.options[i].value+",";
            selectedText += objSelect.options[i].text+",";
            delmark[delmark.length]=i;
         }
     }
     for(var i=0;i<delmark.length;i++){
         objSelect.options.remove(delmark[i]);
        // for(var j=i;j<delmark.length;j++){
        //    delmark[j]=delmark[j]-1;
        // }
     }
     var val=selectedValue.substring(0,selectedValue.length-1).split(",");
     var tex=selectedText.substring(0,selectedText.length-1).split(",");
     if(val==null||val==""){
        return;
     }
     for(var i=0;i<val.length;i++){
        document.all('dx').add(new Option(tex[i],val[i]));
     }
//var value=$("#kcx>option:selected").get(0).value;
//$("#kcx option[value='"+value+"']").remove();   //删除Select中Value='3'的Option
}

function right(){
     var selectedValue = "";
     var selectedText = "";         
     var objSelect = document.all('dx');
     var len=objSelect.options.length;
     var delmark=new Array();
     for(var i=0;i<len;i++)  
     {
         if(objSelect.options[i].selected==true){
            selectedValue += objSelect.options[i].value+",";
            selectedText += objSelect.options[i].text+",";
            delmark[delmark.length]=i;
         }
     }
     for(var i=0;i<delmark.length;i++){
         objSelect.options.remove(delmark[i]);
         for(var j=i;j<delmark.length;j++){
            delmark[j]=delmark[j]-1;
         }
     }
     var val=selectedValue.substring(0,selectedValue.length-1).split(",");
     var tex=selectedText.substring(0,selectedText.length-1).split(",");
     if(val==null||val==""){
        return;
     }
     for(var i=0;i<val.length;i++){
        document.all('kcx').add(new Option(tex[i],val[i]));
     }
}

function save(){
        var str = "";
        var objSelect = document.all('kcx');
        var len=objSelect.options.length;
        alert(len)
        if(len==0)str+=",";
        else{
        for(var i=0;i<len;i++)  
        {
            str += objSelect.options[i].value+",";
        }}
         //  alert(str)
           str=encodeURI(str);
           $.getJSON('alter.jsp',{'instcode':instcode,'str':str,'_t':(new Date())+'s'},function (data){
              if(data.succ1 && data.succ2){
              $.messager.alert('提示','保存成功!');
              }
           })
}

    </script>
    </head>
   
<body>
    <div id="p" class="easyui-panel">
   
      <div id="maintain" class="easyui-panel" align="left">
        <p><a href="#" class="demo" icon="messager-info"></a>
        <label for="whinput" >请选择要维护的机构:</label>
         <input id="whinput" class="easyui-combobox" style="width:300px">
         </p>
      </div>
     
      <div id="source" class="below" style="border:1px solid #ccc;width:400px;height:500px;float:left;margin:5px;overflow: auto">
        <table id="dxtb">
            <tr  height=20 width="400px">     
              <td width="300px" >待查询机构:</td>  
            </tr>
            <tr>
               <td nowrap><select id="dx" MULTIPLE size="24" name="dx"  onChange="" ></select>
               </td>                     
            </tr>
        </table>
       </div>
      
      <div id="123" class="below" style="border:1px solid #ccc;width:100px;height:400px;float:left;margin:5px;">
        <br><br><br><br><br><br><br><br><br><br><br>
        <a href="#" class="easyui-linkbutton" icon="layout-button-left" onclick="left()" align="center">左</a><br><br>
       
        <a href="#" class="easyui-linkbutton" icon="layout-button-right" onclick="right()">右</a><br><br><br><br><br><br>
      
        <a href="#" class="easyui-linkbutton" icon="icon-save" onclick="save()" >保存</a> 
      </div>
     
     <div id="source" class="below" style="border:1px solid #ccc;width:400px;height:400px;float:left;margin:5px;overflow: auto">
        <table id="kctb">
            <tr  height=20 width="400px">     
              <td width="300px" >可查询机构:</td>  
            </tr>
            <tr>
               <td nowrap>
                 <select id="kcx" MULTIPLE size="24" name="kc"  onChange="">
                 </select>
               </td>                     
            </tr>
        </table>
     </div>
     
    </div> 
</body>
</html>

相关解决方案

最新解决方案