左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）

最新推荐文章于 2022-10-29 15:20:39 发布

燕山石头

最新推荐文章于 2022-10-29 15:20:39 发布

阅读量168

点赞数

分类专栏： html 文章标签： HTML

本文链接：https://blog.csdn.net/alan3258/article/details/83336775

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
<head></head>
<BODY>
[code="js"]<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--;
    }
}
}
//这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序//能取得相关数据
function allSelect(){
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')"></a>
<br><br>
</a><a href="javascript:copyToList('chosen','possible')">/a> <br><br>
<a href="javascript:copyAll('chosen','possible')"></a>
<br>
</td>
<td>
<select name="chosen" size="4" MULTIPLE width=200 style="width: 200px;">
<option value="temp">从左边选择你的地区
</select>
</td>
</tr>
</form>
</table>

</BODY>
</html>[/code]

燕山石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）

[code="html"][code="js"]function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字//你可以根据你的具体情况修改{fromList = eval('document.forms[0].' + from);toList = eval('do...
复制链接

扫一扫