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 获得选中文本内容的方法
Feb 15 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP之生成GIF动画的实现方法
2013/06/07 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
php中strtotime函数性能分析
2016/11/20 PHP
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
交通专业个人自荐信格式
2013/09/23 职场文书
资产评估专业大学生求职信
2013/09/29 职场文书
记者岗位职责
2014/01/06 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
学习计划书怎么写
2014/09/15 职场文书
孔子观后感
2015/06/08 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers
Python如何使用循环结构和分支结构
2022/04/13 Python