左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
2008-02-22 09:52
926 查看
<script language="JavaScript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字
//你可以根据你的具体情况修改
{
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + 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--;
}
}
}
function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据
{
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}
function copyAll(from,to){
var fromList = eval('document.forms[0].' + from);
var toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
toList.options.length = 0;
}
for (i=0;i<fromList.options.length;i++)
{
var current = fromList.options[i];
toList.options[toList.length] = new Option(current.text,current.value);
fromList.options[i] = null;
i--;
}
}
</script>
<table border="0"> <form onSubmit="allSelect()">
<tr>
<td>
<select name="possible" size="4"
MULTIPLE width=200 style="width: 200px">
<option value="1">中国广州
<option value="2">中国上海
<option value="3">中国北京
<option value="4">中国武汉
</select>
</td>
<td><a href="javascript:copyToList('possible','chosen')">添加至右方--></a><br>
<br>
<a href="javascript:copyAll('possible','chosen')">添加All至右方--></a>
<br><br>
</a><a href="javascript:copyToList('chosen','possible')"><--添加至左方
</a><br><br> </a><a href="javascript:copyAll('chosen','possible')"><--添加All至
左方</a>
<br></td>
<td>
<select name="chosen" size="4"
MULTIPLE width=200 style="width: 200px;">
<option value="temp">从左边选择你的地区
</select>
</td>
</tr> </form>
</table>
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字
//你可以根据你的具体情况修改
{
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + 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--;
}
}
}
function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据
{
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}
function copyAll(from,to){
var fromList = eval('document.forms[0].' + from);
var toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
toList.options.length = 0;
}
for (i=0;i<fromList.options.length;i++)
{
var current = fromList.options[i];
toList.options[toList.length] = new Option(current.text,current.value);
fromList.options[i] = null;
i--;
}
}
</script>
<table border="0"> <form onSubmit="allSelect()">
<tr>
<td>
<select name="possible" size="4"
MULTIPLE width=200 style="width: 200px">
<option value="1">中国广州
<option value="2">中国上海
<option value="3">中国北京
<option value="4">中国武汉
</select>
</td>
<td><a href="javascript:copyToList('possible','chosen')">添加至右方--></a><br>
<br>
<a href="javascript:copyAll('possible','chosen')">添加All至右方--></a>
<br><br>
</a><a href="javascript:copyToList('chosen','possible')"><--添加至左方
</a><br><br> </a><a href="javascript:copyAll('chosen','possible')"><--添加All至
左方</a>
<br></td>
<td>
<select name="chosen" size="4"
MULTIPLE width=200 style="width: 200px;">
<option value="temp">从左边选择你的地区
</select>
</td>
</tr> </form>
</table>
相关文章推荐
- 左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
- 左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
- JS左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)
- js Select下拉列表框进行多选、移除、交换内容的具体实现方法
- 表格内自定义多选按钮样式,实现全选功能,纯表格内容js分页
- Js实现select全选和取消选择
- js实现(全选)多选按钮的方法【附实例】
- 在Linux vim编辑器中实现左边目录,右边内容布局的方法。
- js实现多选框分类全选与取消
- javascript实现两个select选择框内容动态绑定
- JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
- 页面刷新之后显示当前页面的方法(左边导航,右边内容)
- js实现文本框中输入文字页面中div层同步获取文本框内容的方法
- JS 截取字符串substr 和 substring方法的区别,需要的朋友可以参考下,根据需要自行选择。
- C#与js实现去除textbox文本框里面重复记录的方法
- JS实现选择TextArea内文本的方法
- JQUERY-SELECT 实现下拉框可以搜索、选择
- 常用数学符号的 LaTeX 表示方法 (以下内容主要摘自“一份不太简短的 LATEX2e 介绍”) 1、指数和下标可以用^和_后加相应字符来实现。比如: 2、平方根(square root)
- select列表左右内容交换的JS代码,支持同时多选
- JS+CSS实现实用的单击输入框弹出选择框的方法