当前位置: 代码迷 >> Web前端 >> <select> 上下移动
  详细解决方案

<select> 上下移动

热度:161   发布时间:2012-10-10 13:58:11.0
<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>

  相关解决方案