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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
js数组的基本使用总结
Jan 18 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
小程序转发探索示例
2019/02/19 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python编程中的反模式实例分析
2014/12/08 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python数据操作方法封装类实例
2017/06/23 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
Python之Sklearn使用入门教程
2021/02/19 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
农业生产宣传标语
2014/10/08 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技