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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
JavaScript如何操作css
Oct 24 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
php 无限分类的树类代码
2009/12/03 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
php微信公众号开发之简答题
2018/10/20 PHP
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
理解JS绑定事件
2016/01/19 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python之list对应元素求和的方法
2018/06/28 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
火山动力Java笔试题
2014/06/26 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
残疾人小组计划书
2014/04/27 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
结婚仪式主持词
2015/06/29 职场文书
感恩教育主题班会
2015/08/12 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
PyTorch 如何自动计算梯度
2021/05/23 Python
html5表单的required属性使用
2021/07/07 HTML / CSS