Web页面中两个listbox的option的转移
Html：
<div><span>所选时间:</span><select id="xuanyongTimelb" style="width: 200px; height: 130px;" multiple="multiple"></select></div>
<div class="label"><span id="righttimeid">---></span><span id="lefttimeid"><---</span></div>
<div>
<span>可用时间:</span><select id="keyongTimelb" style="width: 200px; height: 130px;" multiple="multiple">
@* <option>0:00</option>*@
<option tag="1">0:30</option>
<option tag="2">1:00</option>
<option tag="3">1:30</option>
<option tag="4">2:00</option>
<option tag="5">2:30</option>
<option tag="6">3:00</option>
<option tag="7">3:30</option>
<option tag="8">4:00</option>
<option tag="9">4:30</option>
<option tag="10">5:00</option>
<option tag="11">5:30</option>
<option tag="12">6:00</option>
<option tag="13">6:30</option>
<option tag="14">7:00</option>
<option tag="15">7:30</option>
<option tag="16">8:00</option>
<option tag="17">8:30</option>
<option tag="18">9:00</option>
<option tag="19">9:30</option>
<option tag="20">10:00</option>
<option tag="21">10:30</option>
<option tag="22">11:00</option>
<option tag="23">11:30</option>
<option tag="24">12:00</option>
<option tag="25">12:30</option>
<option tag="26">13:00</option>
<option tag="27">13:30</option>
<option tag="28">14:00</option>
<option tag="29">14:30</option>
<option tag="30">15:00</option>
<option tag="31">15:30</option>
<option tag="32">16:00</option>
<option tag="33">16:30</option>
<option tag="34">17:00</option>
<option tag="35">17:30</option>
<option tag="36">18:00</option>
<option tag="37">18:30</option>
<option tag="38">19:00</option>
<option tag="39">19:30</option>
<option tag="40">20:00</option>
<option tag="41">20:30</option>
<option tag="42">21:00</option>
<option tag="43">21:30</option>
<option tag="44">22:00</option>
<option tag="45">22:30</option>
<option tag="46">23:00</option>
<option tag="47">23:30</option>
<option tag="48">24:00</option>
</select>
</div>
我 在option自定了“tag”属性，目的，是实现option在两个listbox之间转移之后，要将两边都要进行“排序”（这点很重要，希望大家注意下，往往有些option的顺序是很有意义的），
也许大家会问我，问什么不直接在option的value上赋值？
回答是：（视情况而定），因为，option的text往往不能代表我们要获取的值，而我们有时必须要借助value或者自定的属性的值，这里，我就写了最通用的方法，这样，无论什么时候，都不妨碍，我的option的val定义什么要的值（当然，用不用value，听你的，程序员本来就是艺术家）；
下面就讲解下js的部分，我先贴出代码：
//备份时间 排序
//向右
function TimeListBoxRight() {
var leftlb = document.getElementById("xuanyongTimelb");
var rightlb = document.getElementById("keyongTimelb"); var arrtext = new Array();
var arrvalue = new Array();
var arrtag = new Array();
var arrindex = new Array(); var j = 0;
for (var i = 0; i < leftlb.options.length; i++) {
if (leftlb.options[i].selected == true) {
//leftlb.options.add(new Option(rightlb.options[i].text, rightlb.options[i].value));
//rightlb.options.remove(i);
arrtext[j] = leftlb.options[i].text;
arrvalue[j] = leftlb.options[i].value;
arrtag[j] = leftlb.options[i].getAttribute("tag");
arrindex[j] = i;
j++;
}
} //添加
for (var k = 0; k < arrvalue.length; k++) {
var opt = new Option();
opt.value = arrvalue[k];
opt.text = arrtext[k];
opt.setAttribute("tag", arrtag[k]);
rightlb.options[rightlb.options.length] = opt;
} //冒泡排序
for (var m = 0; m < rightlb.options.length - 1; m++) {
for (var l = 0; l < rightlb.options.length - 1 - m; l++) {
if (Number(rightlb.options[l].getAttribute("tag")) > Number(rightlb.options[l + 1].getAttribute("tag"))) { var temp = new Option();
temp.value = rightlb.options[l].value;
temp.text = rightlb.options[l].text;
temp.setAttribute("tag", rightlb.options[l].getAttribute("tag")); rightlb.options[l].value = rightlb.options[l + 1].value;
rightlb.options[l].text = rightlb.options[l + 1].text;
rightlb.options[l].setAttribute("tag", rightlb.options[l + 1].getAttribute("tag")); rightlb.options[l + 1].value = temp.value;
rightlb.options[l + 1].text = temp.text;
rightlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag")); }
}
} //删除
for (var n = arrindex.length - 1; n >= 0; n--) {
leftlb.options.remove(arrindex[n]);
} if (leftlb.options.length <= 0) {
$("#righttimeid").disable = true;
} } //Item 向左
function TimeListBoxLeft() {
var leftlb = document.getElementById("xuanyongTimelb");
var rightlb = document.getElementById("keyongTimelb"); var arrtext = new Array();
var arrvalue = new Array();
var arrtag = new Array();
var arrindex = new Array(); var j = 0;
for (var i = 0; i < rightlb.options.length; i++) {
if (rightlb.options[i].selected == true) {
//leftlb.options.add(new Option(rightlb.options[i].text, rightlb.options[i].value));
//rightlb.options.remove(i);
arrtext[j] = rightlb.options[i].text;
arrvalue[j] = rightlb.options[i].value;
arrtag[j] = rightlb.options[i].getAttribute("tag");
arrindex[j] = i;
j++;
}
} //添加
for (var k = 0; k < arrvalue.length; k++) {
var opt = new Option();
opt.value = arrvalue[k];
opt.text = arrtext[k];
opt.setAttribute("tag", arrtag[k]);
leftlb.options[leftlb.options.length] = opt;
} //冒泡排序
for (var m = 0; m < leftlb.options.length - 1; m++) {
for (var l = 0; l < leftlb.options.length - 1 - m; l++) {
if (Number(leftlb.options[l].getAttribute("tag")) > Number(leftlb.options[l + 1].getAttribute("tag"))) { var temp = new Option();
temp.value = leftlb.options[l].value;
temp.text = leftlb.options[l].text;
temp.setAttribute("tag", leftlb.options[l].getAttribute("tag")); leftlb.options[l].value = leftlb.options[l + 1].value;
leftlb.options[l].text = leftlb.options[l + 1].text;
leftlb.options[l].setAttribute("tag", leftlb.options[l + 1].getAttribute("tag")); leftlb.options[l + 1].value = temp.value;
leftlb.options[l + 1].text = temp.text;
leftlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag")); }
}
} //删除
for (var n = arrindex.length - 1; n >= 0; n--) {
rightlb.options.remove(arrindex[n]);
} if (rightlb.options.length <= 0) {
$("#lefttimeid").disable = true;
} }
上面的代码也已经很详细了。
注意点（或许能对你有些用处）：
1.在option上自定的属性（“tag”）后，你需要明白，如果通过js 得到 “tag”，或者设置“tag”的值，
leftlb.options[i].getAttribute("tag"); //获取tag的值
leftlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag")); //设置“tag”的值
2.html的 Select里面的option 在javascript中如何定义：
var opt = new Option();
//在给“tag”赋值的时候，切记，不要学text，value那样干，（或许 . 你用来会很顺手）；
3.当我们在转移之后，我们又重新排序，这里，你想用什么方法排就用什么方法排（算法的灵活运用）。当然，还是要注意：tag的赋值;
//下面的方法，我努力尝试，不过，不管用；
var temp = leftlb.options[l];
leftlb.options[l] = leftlb.options[l+1];
leftlb.options[l+1] = temp;
Web页面中两个listbox的option的转移的更多相关文章
- 关于在asp.net的web页面中的全局变量问题
在asp.net的web页面中是不是没有全局变量?有的,在Class类内部的都是,只不过在WebWofm程式中跟WinForm和Console程式有些区别,当页面刷新时,它们的值不会保持,依然会再次初 ...
- [置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
- php中调用这个功能可以在web页面中显示hello world这个经典单词
php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...
- web页面中可以包含多个对象
# encoding=utf-8 #python 2.7.10 #xiaodeng #web页面中可以包含多个对象 #HTTP权威指南 10页 #应用程序完成一项任务时通常会发布多个http事务.如: ...
- 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置
企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...
- web页面中快速找到html对应元素两种方法
一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个 箭头 按钮,点击它之后,此时将鼠标 ...
- FineBI如何在web页面中嵌入式集成
1. API嵌入集成 1.1 描述 FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简 ...
- WEB页面中常见的四种控件的必须的测试
以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格. 输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...
- 解决同一页面中两个iframe互相调用jquery,js函数
这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="10 ...
随机推荐
- ZooKeeper内部构件
引言 这个文档包含关于ZK内部工作的信息.目前为止,它讨论了这些主题: 原子广播 日志 原子传播 ZK的核心是一个原子的通信系统,它使所有的服务端保持同步. 保证.属性和定义 通过使用ZooKeepe ...
- 图论：最短路-Bellman-Ford
我们之前介绍了一种,(最常用的)SPFA算法,SPFA算法是对Bellman-Ford算法的队列优化,用队列替代了Bellman-Ford中的循环检查部分 然后这里我们介绍Bellman-Ford算法 ...
- 删除windows上特定目录下以*.rar后缀名的python脚本
import os,fnmatch,datetime,time def all_files(root,pattern='*',single_level=False,yield_folders=Fals ...
- Moq 和 RhinoMocks
我们在做单元测试的时候,利用mock可轻松构建出测试需要的类或接口,而不需要编写繁琐的测试代码. .net 下我知道Moq与Rhino Mocks这两个框架. Moq 网上介绍的比较多. Rhino ...
- Windows下端口占用查看
假如我们需要确定谁占用了我们的80端口 1.Windows平台在windows命令行窗口下执行:C:\>netstat -aon|findstr "80" TCP 1 ...
- 模板复习【updating】
马上就要noi了……可能滚粗已经稳了……但是还是要复习模板啊 LCT: bzoj2049 1A 7min # include <stdio.h> # include <string. ...
- 集合框架源码学习之HashMap(JDK1.8)
目录: 0-1. 简介 0-2. 内部结构分析 0-2-1. JDK18之前 0-2-2. JDK18之后 0-3. LinkedList源码分析 0-3-1. 构造方法 0-3-2. put方法 0 ...
- Python3 xml模块的增删改查
xml数据示例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <data> < ...
- Linux-进程间通信（四）: 域套接字
1. 域套接字: (1) 只能用于同一设备上不同进程之间的通信: (2) 效率高于网络套接字.域套接字仅仅是复制数据,并不走协议栈: (3) 可靠,全双工: 2. 域套接字地址结构: struct s ...
- 64_g6
gsettings-desktop-schemas-devel-3.24.0-1.fc26.x..> 22-Mar-2017 20:46 19386 gsf-sharp-0.8.1-27.fc2 ...