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中的私有成员
Sep 18 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
$.extend 的一个小问题
Jun 18 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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在window iis的莫名问题的测试方法
2013/05/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python 元组操作总结
2019/09/18 Python
详解Python yaml模块
2020/09/23 Python
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
建筑人员岗位职责
2013/12/25 职场文书
音乐教师求职信
2014/06/28 职场文书
维稳承诺书
2015/01/20 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏