两个列表框的选项转移与排序

最新推荐文章于 2023-06-16 15:01:21 发布
最新推荐文章于 2023-06-16 15:01:21 发布
阅读量427 收藏
点赞数
分类专栏： HTML 文章标签： javascript function input button html border

源码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>两个列表框的选项转移与排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, td{
font-size: 10pt;
}
a:link{
color: #ff0000;
}
a:visited{
color: #ff0000;
}
a:hover{
color: #0000ff;
}
-->
</style>
</head>
<body>
<br>
<center><h1><font color=#ff0000>笔记本</font>主要属性设定</h1></center>
<table border="0">
<tr align=center>
<td><h3>笔记本属性列表</h3></td>
<td><h3>操作</h3></td>
<td><h3>笔记本主要属性</h3></td>
<td><h3>主要属性重新排序</h3></td>
</tr>
<form name="form_category" method="post" onSubmit="allSelect()">
<tr>
   <td valign=top>
    <select name="possible" MULTIPLE width=200 style="width: 200px;">
     <option value="1">设计类型</option>
     <option value="2">产品类型</option>
     <option value="3">CPU类型</option>
     <option value="4">迅驰技术</option>
     <option value="5">标称频率</option>
     <option value="6">CPU描述</option>
     <option value="7">二级缓存</option>
     <option value="8">主板描述</option>
     <option value="9">屏幕尺寸</option>
     <option value="10">是否宽屏</option>
     <option value="11">内存大小</option>
     <option value="12">硬盘大小</option>
     <option value="9">屏幕尺寸</option>
     <option value="10">是否宽屏</option>
     <option value="11">内存大小</option>
     <option value="12">硬盘大小</option>
    </select>
   </td>
   <td>
   <a href="javascript:copyToList('possible','chosen')">添加至主要属性--&gt;</a><br>
   <br>
   <a href="javascript:copyToList('chosen','possible')">&lt;--从主要属性移除</a></td>
   <td valign=top>
    <select name="chosen" width=200 style="width: 200px;">
     <option value="temp">从左边选择属性</option>
    </select>
   </td>
      <td align=center>
     <a href="javascript:;" onClick="doTopItem()">移到最上面</a><br />
     <a href="javascript:;" onClick="doUpItem()">向上移动</a><br />
     <a href="javascript:;" onClick="doDownItem()">向下移动</a><br />
     <a href="javascript:;" onClick="doBottomItem()">移到最下面</a>
    </td>
</tr>
</form>
<tr>
   <td colspan="4">
    <div align="center">
    <input type="button" value="保 存" onClick="doSubmit()">
    &nbsp;&nbsp;&nbsp;
    <input type="button" value="重 置" onClick="doRe()">
    <input type="hidden" name="items" value="">
    </div>
   </td>
</tr>
</table>
<span id=shownum></span>
<SCRIPT LANGUAGE="javascript">
document.getElementById("possible").size=document.getElementById("possible").length;
//go top
function doTopItem(){
var seqSelect=document.getElementById('chosen');
var length=seqSelect.size;
   var topV,topT;
   var tempV=new Array();
   var tempT=new Array();
   for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
    if(i==0)
      return false;
    topV=seqSelect.options[0].value;
    topT=seqSelect.options[0].text;
    seqSelect.options[0].value=seqSelect.options[i].value;
    seqSelect.options[0].text=seqSelect.options[i].text;
   
    for(var j=1;j<length;j++){
     tempV[j]=seqSelect.options[j].value;
     tempT[j]=seqSelect.options[j].text;
     if(j==1){
     seqSelect.options[1].value=topV;
     seqSelect.options[1].text=topT;
     }
     else if(j>i){
      break;     
     }else{
     seqSelect.options[j].value=tempV[j-1];
     seqSelect.options[j].text=tempT[j-1];
     }
    }
   
    }
   }
   seqSelect.options[0].selected=true;
}

//go bottom
function doBottomItem(){
var seqSelect=document.getElementById('chosen');
var length=seqSelect.size;
    var bottomV,bottomT;
   var tempV=new Array();
   var tempT=new Array();
   for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
    if(i==(length-1))
     return false;
    bottomV=seqSelect.options[length-1].value;
    bottomT=seqSelect.options[length-1].text;
    seqSelect.options[length-1].value=seqSelect.options[i].value;
    seqSelect.options[length-1].text=seqSelect.options[i].text;
   
     for(var j=length-2;j>=0;j--){
     tempV[j]=seqSelect.options[j].value;
     tempT[j]=seqSelect.options[j].text;
     if(j==(length-2)){
     seqSelect.options[length-2].value=bottomV;
     seqSelect.options[length-2].text=bottomT;
     }
     else if(j<i){
      break;     
     }
      else{
     seqSelect.options[j].value=tempV[j+1];
     seqSelect.options[j].text=tempT[j+1];
     }
    }
   
    }
   }
   seqSelect.options[length-1].selected=true;
}

//go up 1
function doUpItem(){
var seqSelect=document.getElementById('chosen');
var length=seqSelect.size;
var tempV,tempT;
for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
    if(i==0)
     return false;
    tempV=seqSelect.options[i-1].value;
    tempT=seqSelect.options[i-1].text;
    seqSelect.options[i-1].value=seqSelect.options[i].value;  
    seqSelect.options[i-1].text=seqSelect.options[i].text;
    seqSelect.options[i].value=tempV;  
    seqSelect.options[i].text=tempT;
    seqSelect.options[i-1].selected=true;
    break;     
   }
}
}

//go down 1
function doDownItem(){
var seqSelect=document.getElementById('chosen');
var length=seqSelect.size;
var tempV,tempT;
for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
    if(i==(length-1))
     return false;
    tempV=seqSelect.options[i+1].value;
    tempT=seqSelect.options[i+1].text;
    seqSelect.options[i+1].value=seqSelect.options[i].value;  
    seqSelect.options[i+1].text=seqSelect.options[i].text;
    seqSelect.options[i].value=tempV;  
    seqSelect.options[i].text=tempT;
    seqSelect.options[i+1].selected=true;
    break;     
   }
}
shownum.innerHtml=length;
}


//get value
function doSubmit(){
var seqSelect=document.getElementById('chosen');
var length=seqSelect.size;
var items="";
for(var i=0;i<length;i++){
   if(i==0){
    items=seqSelect.options[i].value;
   }else{
    items=items+"||"+seqSelect.options[i].value;
   }
}
document.form_category.items.value=items;
document.form_category.action="data.aspx";
document.form_category.submit();
}

function doRe(){
var seqSelect=document.getElementById('chosen');
var length=seqSelect.size;
document.form_category.action="";
document.form_category.submit();
}


function copyToList(from,to){
//from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
   fromList = eval('document.form_category.' + from);
   toList = eval('document.form_category.' + to);
   if (toList.options.length > 0 && toList.options[0].value == 'temp')
   {
     toList.options.length = 0;
   }
   var sel = false;
   for (i=0;i<fromList.options.length;i++)
   {
     var current = fromList.options[i];
     if (current.selected)
     {
       sel = true;
       if (current.value == 'temp')
       {
         alert ('你不能选择这个项目!');
         return;
       }
       txt = current.text;
       val = current.value;
       toList.options[toList.length] = new Option(txt,val);
       fromList.options[i] = null;
       i--;
     }
   }
fromList.size=fromList.length;
toList.size=toList.length;
   if (!sel) alert ('你还没有选择任何项目');
}
function allSelect(){
//这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序能取得相关数据
   List = document.form_category.chosen;
   if (List.length && List.options[0].value == 'temp') return;
   for (i=0;i<List.length;i++)
   {
      List.options[i].selected = true;
   }
}
</SCRIPT>

   </body>
</html>

 
edmond80
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Matlab GUI编程技巧（七）：matlablistbox操作-列表框（ListBox）和uilistbox常用操作
左手の明天的博客
05-24 6696
、列表框控件(ListBox)的常用属性 属性 说明 (Name) 列表框控件的名称 Appearance 是否用立体效果绘制,取值为：0 平面 1 3D(立体) BackColor 设置背景颜色,可从弹出的调色板选择。 该控件获得焦点时,失去焦点的控件的Validate事件是否发生。取值为： CauseValidation True 发生 False 不发生 制定列表框中列的数目。列表框中的项目可以单列垂直显示,也可以水平单行或多 Cloumns 列列表显示。取值为：0 垂直单列列表 ...
GetSelection:从列表框或弹出菜单中获取选定的字符串-matlab开发
05-30
获取选择从列表框或弹出菜单中获取选定的字符串是一项标准工作，它由 Matlab 的 POPUPSTR 命令执行，直到它过时为止。 尽管这仅需要一些代码行，但考虑列表框的单选和多选并非完全无足轻重。 因此，这个小而简单的功能可能很有用。 例子： Selected = GetSelection(UIHandle) 单选列表框和弹出字符串回复一个字符串，多选列表框回复一个单元格字符串。
7 MATLAB_GUI_列表框(ListBox)的基本用法
最新发布
无
06-16 2582
MATLAB GUI
MATLAB GUI笔记(八):列表框的使用
菜yuan~的博客
11-28 5353
MATLAB GUI的简单笔记
在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。...
weixin_34409741的博客
09-13 975
<form name="myForm"> <table> <tr valign="top"> <td> <select name="leftList" multiple size="6" style="width:50px;"> <option>a</option&...
baff:业务应用程序功能框架-基于Sencha ExtJS 5和Spring 4
05-19
因为开发一种端到端的工作解决方案是如此之快，所以对于基于一种标准模式的活动而言，大约需要一两个小时，因此它非常适合敏捷开发以及早期的快速原型开发。交付生命周期，其进一步的优势是可以扩展原型以开发生产...
50个必备的实用jQuery代码段
10-09
10. 如何从一个未排序的集合中找出某个元素的索引号 4 11. 如何把函数绑定到事件上： 4 12. 如何追加或是添加html到元素中： 4 13. 在创建元素时，如何使用对象字面量（literal）来定义属性 5 14. 如何使用多个属性...
Java开发技术大全(500个源代码).
12-02
outputMax.java 求两个数中的最大数 overflowExample.java 演示溢出 precedence.java 演示自加运算符的优先级 primeNumber.java 输出100-200之间的所有素数 ranking.java 评定成绩等级 rankingBySwitch.java ...
使用AlertDialog创建多选列表框
01-08 1706
Main.xml     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity"      android:orien
matlab listbox 操作,列表框（ListBox） 常用的的操作详解 | 求索阁
weixin_39525812的博客
03-18 3608
1. 添加数据：声明控件变量的类别为Control,变量类型为CListBox,变量名为m_ListBox_Content.m_ListBox_Content.AddString(_T("123"));m_ListBox_Content.AddString(_T("汉字"));m_ListBox_Content.AddString(_T("English"));m_ListBox_Content....
c# winform两个列表控件公用一个数据集，右边的列表里不能出现左边列表里选中的项
橙-极纪元-cplvfx-JJY.Cheng
03-31 477
c# winform两个列表控件公用一个数据集，右边的列表里不能出现左边列表里选中的项 技术栈：泛型+linq 左边列表绑定数据 /// <summary> /// 加载执行 /// </summary> /// <param name="sender"></param> ...
两个select列表相互移动
aa_moon的专栏
12-02 1075
多选框  arrayList 以ascii进行排序 blue red white 001 1000 >" onclick="moveright()" style="width:100px"/> >>" type="button" onclick="moveallright()"  style="width:100px"/>
matlab gui输入数据库,从数据库值填充Matlab GUI列表框
weixin_33210666的博客
03-18 447
我对Matlab的GUI相对比较陌生，并且我使用GUIDE创建了一个简单的GUI。我想连接到一个数据库(已经定义和工作！)并用数据库中的值填充一个列表框，以便用户可以选择使用哪一个(在这种情况下，它们是化合物)。我一直无法找到一个很好的教程或线索如何以这种方式填充列表框。到目前为止，我有：从数据库值填充Matlab GUI列表框function load_listbox(hObject,handl...
选择列表--左边选择到右边，右边选择到左边，支持回滚-------自制
hwc_dd的博客
09-19 1780
效果图，样式还没调：（话说丑的中用。。。。。。。） 直接上： &lt;!DOCTYPE html&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns...
使用matlab设计可编辑的下拉框
ncf的博客
10-02 8719
使用matlab设计可编辑的下拉框 1.思路： 查阅大量资料，发现 matlab 在 UI 设计这一块还是较为欠缺，以下有几种思路仅供借鉴： 1.只采用 Pop-Up Menu 实现，通过捕捉键盘输入事件，获取输入的内容，捕捉结束标志符（例如：回车），得到完整内容，之后修改Pop-Up Menu 的内容即可。 缺点：经测试，发现 matlab 中键盘输入事件只对英
matlab listbox使用
haodawei123的博客
08-23 2260
1、几个重要的属性 Tag属性 设置控件的名称，m文件编辑获取控件时使用 Value属性 指示当前选中的是第几行 String属性 设置显示在listbox中的内容，可以在设计界面通过“ENTER”换行输入多行内容 获取listbox内容 function listbox2_Callback(hObject, eventdata, handles) % hObject handle to listbox2 (see GCBO) % eventdata reserved - to be define
【matlab GUI】GUI listbox的用法
热门推荐
赖德发的博客
06-15 3万+
A= get(handles.listbox1,'value'); %A的值代表我们选的是第几个选项 switch A case 1 % 当我们选的是1 时，给变量B赋个什么样的值，依次类推，最后B将是你想要的结果 I=imread('1.jpg'); I0=rgb2gray(I); axes(handles.axes2) BW1=edge(I0,'Roberts
帮我写一个vue的穿梭框
02-21
答：Vue.js 穿梭框是一种用于在两个列表之间进行元素移动的 UI 组件，它可以用于在两个不同的列表之间进行元素的移动，拖拽，排序等。下面是一个实现 Vue.js 穿梭框的示例： <template> 搜索'"/> </template> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值