编程 Javascript

js Select下拉列表框进行多选、移除、交换内容的具体实现方法

Posted in Javascript onAugust 13, 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html 中的全部文章" target="_blank">html</a></span>4/loose.dtd">
<<span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html 中的全部文章" target="_blank">html</a></span>>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/<span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html 中的全部文章" target="_blank">html</a></span>; charset=gb2312">
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
      <tr>
        <td height="25" background="wp-content/uploads/2012/05/79760-772704496-8.gif" bgcolor="#FFFFFF">　请选择：</td>
      </tr>
      <tr>
        <td align="center" bgcolor="#FFFFFF"><select name="sel_place1" size="6" multiple id="sel_place1" style="width:100px " >
          <option value="sel1">江苏省</option>
          <option value="sel2">广东省</option>
          <option value="sel3">河南省</option>
          <option value="sel4">吉林省</option>
          <option value="sel5">浙江省</option>
        </select></td>
      </tr>
    </table></td>
    <td width="80" align="center" valign="bottom"><input name="sure1" type="button" id="sure1"
  onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<">
  <input name="sure2" type="button" id="sure2"
  onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" height="2"></td>
    <td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
      <tr>
        <td height="25" background="wp-content/uploads/2012/05/79760-772704496-8.gif" bgcolor="#FFFFFF">
　请选择：</td>
      </tr>
      <tr>
        <td align="center" bgcolor="#FFFFFF"><select name="sel_place2" size="6" multiple id="sel_place2" style="width:100px ">
            </select></td>
      </tr>
    </table></td>
  </tr>
</table>
</form>
<script language="javascript">
function allsel(n1,n2)
{
  while(n1.selectedIndex!=-1)
  {
   var indx=n1.selectedIndex;
   var t=n1.options[indx].text;
   n2.options.add(new Option(t));
   n1.remove(indx);
  }
}
</script>
</body>
</html></td>
   </tr>
 </table>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

TextArea设置MaxLength属性最大输入值的js代码

Dec 21 Javascript

javascript中的void运算符语法及使用介绍

Mar 10 Javascript

jquery按回车提交数据的代码示例

Nov 05 Javascript

jquery实现的鼠标拖动排序Li或Table

May 04 Javascript

一个简单的动态加载js和css的jquery代码

Sep 01 Javascript

jQuery对val和atrr("value")赋值的区别介绍

Sep 26 Javascript

jquery调整表格行tr上下顺序实例讲解

Jan 09 Javascript

关于微信jssdk实现多图片上传的一点心得分享

Dec 13 Javascript

vue router2.0二级路由的简单使用

Jul 05 Javascript

简单的网页广告特效实例

Aug 19 Javascript

node thread.sleep实现示例

Jun 20 Javascript

详解Vue基于vue-quill-editor富文本编辑器使用心得

Jan 03 Javascript

jquery二级导航内容均分的原理及实现

Aug 13 #Javascript

模拟多级复选框效果的jquery代码

Aug 13 #Javascript

javascript 树形导航菜单实例代码

Aug 13 #Javascript

Jquery操作下拉框(DropDownList)实现取值赋值

Aug 13 #Javascript

javascript实现div浮动在网页最顶上并带关闭按钮效果实例

Aug 13 #Javascript

鼠标经过显示二级菜单js特效

Aug 13 #Javascript

Jquery实现搜索框提示功能示例代码

Aug 13 #Javascript

You might like

php Static关键字实用方法

2010/06/04 PHP

PHPThumb PHP 图片缩略图库

2012/03/11 PHP

php 保留字列表

2012/10/04 PHP

phpstudy默认不支持64位php的解决方法

2017/02/20 PHP

Yii2表单事件之Ajax提交实现方法

2017/05/04 PHP

bindParam和bindValue的区别以及在Yii2中的使用详解

2018/03/12 PHP

PHP实现微信申请退款功能

2018/10/01 PHP

Ajax+Json 级联菜单实现代码

2009/10/27 Javascript

JavaScript实现多维数组的方法

2013/11/20 Javascript

将查询条件的input、select清空

2014/01/14 Javascript

jQuery简单图表peity.js使用示例

2014/05/02 Javascript

JavaScript日期时间格式化函数分享

2014/05/05 Javascript

node.js中的fs.fchmodSync方法使用说明

2014/12/16 Javascript

JavaScript操作Cookie详解

2015/02/28 Javascript

js实现浏览本地文件并显示扩展名的方法

2015/08/17 Javascript

VUE实现一个分页组件的示例

2017/09/13 Javascript

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

2018/09/14 Javascript

JS中实现浅拷贝和深拷贝的代码详解

2019/06/05 Javascript

Vue如何将页面导出成PDF文件

2020/08/17 Javascript

微信小程序之高德地图多点路线规划过程示例详解

2021/01/18 Javascript

Python中Collection的使用小技巧

2014/08/18 Python

Linux环境下MySQL-python安装过程分享

2015/02/02 Python

利用python打印出菱形、三角形以及矩形的方法实例

2017/08/08 Python

Python 将代码转换为可执行文件脱离python环境运行(步骤详解)

2021/01/25 Python

韩国知名的家庭购物网站：CJmall

2016/08/01 全球购物

美国在线宠物商店：Chewy

2019/01/12 全球购物

瑞典多品牌连锁店：Johnells

2021/01/13 全球购物

.net面试题

2015/12/22 面试题

如何拷贝一整个Java对象，包括它的状态

2013/12/27 面试题

优秀党员学习焦裕禄精神思想汇报范文

2014/09/10 职场文书

公司员工培训管理制度

2015/08/04 职场文书

2016大学生党校学习心得体会

2016/01/06 职场文书

关于考试抄袭的检讨书

2019/11/02 职场文书

python爬虫selenium模块详解

2021/03/30 Python

python解析json数据

2022/04/29 Python

Python开发五子棋小游戏

2022/05/02 Python