html+js 左移右移
来源:互联网 发布:java replace 替换? 编辑:程序博客网 时间:2024/05/16 12:36
<html>
<head>
<title>
index
</title>
<head>
<body>
<form name="form1" id="form1" method="post" action="">
<label>select 多选框</label>
<table>
<tr>
<td>
<!--select 多选框b1 Begin-->
<select size="2" multiple id="b1" style="height:151px; width:180px;">
<option value="我的秘书">我的秘书</option>
<option value="我的工作台">我的工作台</option>
<option value="项目管理">项目管理</option>
<option value="计划管理"> 计划管理</option>
<option value="企业管理">企业管理</option>
</select>
</td>
<!--select 多选框b1 end-->
<td>
<!--select 多选框 button Begin-->
<table>
<tr align="center"><input type="button" value = " > " onclick="myRight()"/></tr>
<tr align="center"><input type="button" value = " >> " onclick="myRightAll()"/></tr>
<tr align="center"><input type="button" value = " < " onclick="myleft()"/></tr>
<tr align="center"><input type="button" value = " << " onclick="myleftAll()"/></tr>
<tr align="center"><input type="button" value = " ↑ " onclick="myup()"/></tr>
<tr align="center"><input type="button" value = " ↓ " onclick="mydown()"/></tr>
</table>
</td>
<td>
<select size="2" multiple id="b2" style="height:151px; width:180px;">
</select>
</td>
<tr>
</table>
<br/>
</form>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
//***select begin *************************************************************************************************************************************
function myRight()//将select框中选中的列,移到另一个select框中
{
var select_b1 = document.getElementById("b1");
var select_b2 = document.getElementById("b2");
var count = 0;
for(i = 0; i < select_b1.length; i ++)
{ count = 0;
if(select_b1.options[i].selected)
{
var temp = document.createElement("option");
temp.value = select_b1[i].value;
temp.text = select_b1[i].value;
if(select_b2.length == 0)
{
select_b2.add(temp);
}
else
{
for(j = 0; j < select_b2.length; j ++)
{
if(select_b2.options[j].value == temp.value)
{
count++;
}
}
if(count == 0)
{
select_b2.add(temp);
}
}
}
}
}
function myRightAll()//将select框中选中的列,全部移到另一个select框中
{
var select_b1 = document.getElementById("b1");
var select_b2 = document.getElementById("b2");
for(i = select_b2.length; i >= 0; i --)
{
select_b2.remove([i]);
}
if(select_b2.length == 0)
{
for(i = 0; i < select_b1.length; i ++)
{
var temp = document.createElement("option");
temp.value = select_b1[i].value;
temp.text = select_b1[i].value;
select_b2.add(temp);
}
}
}
function myleft()//将select框中选中的列删除
{
var select_b2 = document.getElementById("b2");
var tmp = select_b2.length;
for(i = 0; i < select_b2.length; i ++)
{ //alert(select_b2.length);
if(select_b2.options[i].selected)
{ //alert(i);
select_b2.remove([i]);
i--;
}
}
}
function myleftAll()//全部删除将select框中的列
{
var select_b1 = document.getElementById("b1");
var select_b2 = document.getElementById("b2");
for(i = select_b2.length; i >= 0; i --)
{
select_b2.remove([i]);
}
}
function myup()//向上移动
{
var select_b2 = document.getElementById("b2");
var selectedIndex = select_b2.selectedIndex;
var count = 0;
if(select_b2.length != 0)
{
for(i = 0; i < select_b2.length; i ++)
{
if(selectedIndex != 0)
{
if(select_b2.options[i].selected)
{
count ++;
}
}
else
{
return;
}
}
if(count != 0)
{
if(selectedIndex <= select_b2.length-1)
{
var temp = document.createElement("option");
temp.text = select_b2.options[select_b2.selectedIndex].text;
temp.value = select_b2.options[select_b2.selectedIndex].value;
select_b2.options[select_b2.selectedIndex].text = select_b2.options[select_b2.selectedIndex - 1].text;
select_b2.options[select_b2.selectedIndex].value = select_b2.options[select_b2.selectedIndex - 1].value;
select_b2.options[select_b2.selectedIndex - 1].text = temp.text;
select_b2.options[select_b2.selectedIndex - 1].value = temp.value;
select_b2.selectedIndex = select_b2.selectedIndex - 1;
}
}
else
{
alert("没有选中一个!");
}
}
else
{
alert("没有数据");
}
}
function mydown()//向下移动
{
var select_b2 = document.getElementById("b2");
var selectedIndex = select_b2.selectedIndex;
var count = 0;
if(select_b2.length != 0)
{
for(i = 0; i < select_b2.length; i ++)
{
if(selectedIndex != select_b2.length-1)
{
if(select_b2.options[i].selected)
{
count ++;
}
}
else
{
return;
}
}
if(count != 0)
{
if(selectedIndex <= select_b2.length-1)
{
var temp = document.createElement("option");
temp.text = select_b2.options[select_b2.selectedIndex].text;
temp.value = select_b2.options[select_b2.selectedIndex].value;
select_b2.options[select_b2.selectedIndex].text = select_b2.options[select_b2.selectedIndex + 1].text;
select_b2.options[select_b2.selectedIndex].value = select_b2.options[select_b2.selectedIndex + 1].value;
select_b2.options[select_b2.selectedIndex + 1].text = temp.text;
select_b2.options[select_b2.selectedIndex + 1].value = temp.value;
select_b2.selectedIndex = select_b2.selectedIndex + 1;
}
}
else
{
alert("没有选中一个!");
}
}
else
{
alert("没有数据");
}
}
</SCRIPT>
- html+js 左移右移
- HTML&&JS
- html js
- html js
- html + js
- js html
- html JS
- js .html()
- html/css_1基础【HTML/JS】
- html&js经典技巧
- js,html编辑器
- 动态JS+html
- HTML生成JS 编辑器
- js 去除 HTML 标签
- js去掉HTML标记
- html中js代码
- html js 常用技巧
- html js 常用
- mysql 多主多从
- js插件-右下角弹出信息提示框
- android子线程中更新UI的方法
- 1.搭起环境
- 日经社説 20150304 献金疑惑を招いた制度の不備
- html+js 左移右移
- 信息提醒:AlertView和UIAlertController
- hdu2444 二分图的匹配,先判断是否为二分图
- 日经社説 20150304 多様なサービスを競い合える銀行法制に
- Difference Between Paging and Swapping
- ubuntu下如何用命令行运行deb安装包
- git: command not found
- android错误之android.content.res.Resources$NotFoundException:
- C++学习:string用法