<select> 左右移动

最新推荐文章于 2021-05-31 20:53:20 发布

原创最新推荐文章于 2021-05-31 20:53:20 发布 · 207 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #ViewUI

代码专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个用于机构维护的交互式平台，包括选择、查询、调整和保存功能，适用于机构管理领域的专业人士。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。