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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
js 获取html5的data属性实现方法
Jul 28 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
vue-cli设置publicPath小记
Apr 14 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
js更优雅的兼容
2010/08/12 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue实现标签云效果的示例
2020/11/09 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python构建自定义回调函数详解
2017/06/20 Python
python 获取图片分辨率的方法
2019/01/08 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python socket 聊天室实例代码详解
2019/11/14 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
pandas分批读取大数据集教程
2020/06/06 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
校园活动宣传方案
2014/03/28 职场文书
作文批改评语大全
2014/04/23 职场文书
中学生励志演讲稿
2014/04/26 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
通知的格式范文
2015/04/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书