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 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python 字典的打印实现
2019/09/26 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
详解Python 中的容器 collections
2020/08/17 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
个人股份合作协议书
2014/10/24 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
导游带团欢迎词
2015/09/30 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
深入解析MySQL索引数据结构
2021/10/16 MySQL
Linux安装Docker详细教程
2022/07/07 Servers