内容显示页
 
类别:JavaScript | 浏览(9559) | 2007-2-5 21:08:00



可修改代码后再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>选择下拉菜单</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>
<BODY>
<form method="post" name="myform">
  <table border="1" width="400">
    <tr>
      <td><CENTER>
          可选择排序方式
        </CENTER></td>
      <td></td>
      <td><CENTER>
          已选择排序方式
        </CENTER></td>
    </tr>
    <tr>
      <td width="40%"><select style="width:100%;" multiple name="left" size="8"
  ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
          <option value="20">按编入时间(晚到早)</option>
          <option value="30">按编入时间(早到晚)</option>
          <option value="40">按点击率(升序)</option>
          <option value="50">按点击率(降序)</option>
          <option value="60">按资产名称(升序)</option>
          <option value="70">按资产名称(升序)</option>
        </select>
      </td>
      <td width="20%" align="center"><input type="button" value=" >>>> " onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
        <br>
        <br>
        <input type="button" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
      </td>
      <td width="40%"><select style="width:100%;" multiple name="right" size="8"
  ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="3"><CENTER>
          <INPUT TYPE="button" value="优先级上升" onClick="changepos(right,-1)">
          <INPUT TYPE="button" value="优先级下降" onClick="changepos(right,1)">
          <INPUT TYPE="button" value="优先级置顶" onClick="gototop(right)">
        </CENTER></td>
    </tr>
  </table>
  值:
  <input type="text" name="result" id="result" size="40" value="" />
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
 for(var i=0;i<e1.options.length;i++){
  if(e1.options[i].selected){
   var e = e1.options[i];
   e2.options.add(new Option(e.text, e.value));
   e1.remove(i);
   i=i-1
  }
 }
 document.getElementById('result').value=getvalue(document.getElementById('right'));
}
function getvalue(geto){
 //var allvalue = "";
 //for(var i=0;i<geto.options.length;i++){
 // allvalue +=geto.options[i].value + ",";
 //}
 var resultArray = new Array();
 for(var i=0;i<geto.options.length;i++){
  resultArray.push(geto.options[i].value);
 }
 return resultArray.join();
}
function changepos(obj,index){
 if(index==-1){
  if(obj.selectedIndex !=-1){
   if (obj.selectedIndex>0){
    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1));
    document.getElementById('result').value=getvalue(document.getElementById('right'));
   }
  }else{
   alert("请至少选择一个已选择排序方式");
  }
 }else if(index==1){
  if(obj.selectedIndex !=-1){
   if (obj.selectedIndex<obj.options.length-1) {
    obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1));
    document.getElementById('result').value=getvalue(document.getElementById('right'));
   }
  }else{
   alert("请至少选择一个已选择排序方式");
  }
 }
}
function gototop(obj){
 if(obj.multiple){
  if(obj.selectedIndex !=-1){
   for(var selIndex=0; selIndex<obj.options.length; selIndex++){
    if(obj.options[selIndex].selected){
                     var transferIndex = selIndex;
                     while(transferIndex > 0 && !obj.options[transferIndex - 1].selected){
                         obj.options[transferIndex].swapNode(obj.options[transferIndex - 1]);
                         transferIndex --;
                     }
      document.getElementById('result').value=getvalue(document.getElementById('right'));
                 }
   }
  }else{
   alert("请至少选择一个已选择排序方式");
  }
 }else{
  if(obj.selectedIndex !=-1){
   var selIndex = obj.selectedIndex;
   while(selIndex > 0){
    obj.options[selIndex].swapNode(obj.options[selIndex - 1]);
    selIndex --;
   }
   document.getElementById('result').value=getvalue(document.getElementById('right'));
  }else{
   alert("请至少选择一个已选择排序方式");
  }
 }
}
//-->
</script>
</BODY>
</HTML>

 

 


引用本页地址:http://www.yongfa365.com/item/686ba37800f67121.html
 
 
相关链接
 
网友评论:
1 steven.gao - 2007-11-2 11:02:25
学习
 
2 don - 2009-2-18 14:23:38
感谢分享
 
3 匿名网友 - 2009-6-30 10:42:06
问题:如果把width:110%成成widthk:100%,进行“优先级上升/优先级下降/优先级置顶”操作的话,右边的宽度就自动缩小了.........
 
4 匿名网友 - 2009-12-24 9:14:24
如何提取result的值?
 
5 匿名网友 - 2009-12-24 14:07:40
在服务器端,直接接收,然后split
 
6 匿名网友 - 2010-9-3 11:08:35
你这个js有bug,给右边的right组件,设置宽度,向上移动到最后一个时候,速度变得超级慢,
不知道,你修改了没有?

联系我qq:8673711
 
7 supra shoes - 2010-12-27 16:15:14
谢谢楼主分享!
 
姓名: 记住我
网址:
邮箱:
内容:
验证码:  验证码图片 看不清? 换张图试试
 
     
 
 
文章分类
 
 
.Net + C#(73)
 
 
ASP+VBS(161)
 
 
 
Linux(10)
 
 
 
web 2.0(26)
 
 
 
 
 
心程(68)
 
生活(97)
 
 
     

Power by :柳永法(yongfa365)'Blog  | 京ICP备07011491号  QQ:64049027  E-mail:64049027@qq.com yongfa365'CodePlex yongfa365'CodeGoogle

申请友情链接 要求:跟本站主题相类似正规网站,双方交换为首页位置

转载请注明来源,以便后人及时得到最新、修正、加强版!!!