`
tanglong8848
  • 浏览: 67792 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

下拉列表的操作 改变左右值

 
阅读更多

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练--下拉列表的操作01</title>
<script language="JavaScript" type="text/javascript">

//移动下拉框被选中选项
//fromSelId :源下拉框id
//toSelId :目标下拉框id
function moveOption(fromSelId,toSelId){
var fromSel = document.getElementById(fromSelId);
var toSel = document.getElementById(toSelId);

if(fromSel==null||toSel==null){
return false;
}

for(var i = 0;i < fromSel.options.length;i++){
var _option = fromSel.options[i];
//是否选中
if(_option.selected){
//往目标下拉框加添加选项
toSel.appendChild(_option);
i--;//下标变了
}
}
}

</script>
</head>

<body bgcolor="abcdef">
<form id='demoFrm' name="demoFrm" method="post" action="" >

<table border="1" align="center" width="300">
<tr>
<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
<td align="center" width="100">
<select multiple="multiple" size="10" id="leftSel">
<option value="1">第一个理拉框的值1</option>
<option value="2">第一个理拉框的值2</option>
<option value="3">第一个理拉框的值3</option>
<option value="4">第一个理拉框的值4</option>
</select>
</td>
<td align="center" width="100">
<input type="button" id="moveTwo" value="-->>" onclick="moveOption('leftSel','rightSel');">
<br>
<input type="button" id="moveOne" value="<<--" onclick="moveOption('rightSel','leftSel');">
</td>
<td align="center" width="100">
<select multiple="multiple" size="10" id="rightSel">
<option value="1">第二个理拉框的值1</option>
<option value="2">第二个理拉框的值2</option>
<option value="3">第二个理拉框的值3</option>
<option value="4">第二个理拉框的值4</option>
</select>
</td>
</tr>
</table>

</form>

<div id="showContent" style="font-size:30px;">
</div>
</body>
</html>

分享到:
评论

相关推荐

    JavaScript网页特效范例宝典源码

    实例061 获取下拉列表/菜单的值 104 实例062 遍历多选择下拉列表 105 实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级...

    delphi 开发经验技巧宝典源码

    0293 改变下拉列表的文字颜色 190 8.7 窗体的特殊效果 191 0294 如何动态分割窗体 191 0295 如何将应用程序背景与桌面融合 191 0296 如何在屏幕最前面显示滚动字幕 192 0297 制作磁性窗体 193 0298 ...

    delphi 开发经验技巧宝典源码06

    0293 改变下拉列表的文字颜色 190 8.7 窗体的特殊效果 191 0294 如何动态分割窗体 191 0295 如何将应用程序背景与桌面融合 191 0296 如何在屏幕最前面显示滚动字幕 192 0297 制作磁性窗体 193 0298 ...

    电脑高手必备 Windows系统35招实用技巧

    选项组中,通过左右调整滑块改变系统输出的音量大小。如果希望在任务栏 中显示音量控制图标,可以启用“将音量图标放入任务栏”复选框。  (7)你想调节各项音频输入输出的音量,单击“设备音量”区域中的“高 级...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 ...

    ExtAspNet_v2.3.2_dll

    -修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为示例工程添加改变语言和皮肤的下拉列表。 -为PageContext增加静态函数Refresh,在切换语言和皮肤时使用。 +2009-12-01 v2.1.7 -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript...

    Delphi开发范例宝典目录

    实例080 在TStringGrid中实现单元格下拉列表 98 实例081 在TStringGrid组件中绘图 99 实例082 TStringGrid组件上回车移动焦点 100 实例083 在TStringGrid组件中设置只读栏 102 实例084 TStringGrid组件...

    .net技术资料大全(语言规范 源码教程 学习笔记 技术资料 .net代码生成器)

    如何为DataGrid添加下拉列表框.txt 如何用C#在Excel中生成图表?.txt 如何用程序实现键盘和鼠标的模拟?.txt 如何与资源管理器互动剪切、拷贝、粘贴文件.txt 深入理解C#编程中的组件-事件-委托.txt 生成透明的...

    ASP升级.net资料大全(c#入门 语言规范 源码教程 学习笔记 技术资料 面试题 asp与.net代码生成器)

    如何为DataGrid添加下拉列表框.txt 如何用C#在Excel中生成图表?.txt 如何用程序实现键盘和鼠标的模拟?.txt 如何与资源管理器互动剪切、拷贝、粘贴文件.txt 深入理解C#编程中的组件-事件-委托.txt 生成透明的...

    输入法设置工具 IME TOOL 2.8.3

    2.5.8 版,修改键盘定义对话框丢失下拉列表问题(真是莫名其妙),一些细节调整。 2.5.7 版,修订其它切换热键的设置按钮文字不会随左边的下拉列表切换的 bug。 2.5.6 版,应网友要求取消气球提示,改为状态栏提示。...

    jQuery权威指南-源代码

    4.7.2 下拉列表框中的事件应用/104 4.8 列表应用/109 4.9 网页选项卡的应用/114 4.10 综合案例分析—删除数据时的提示效果在项目中的应用/116 4.10.1 需求分析/116 4.10.2 效果界面/117 4.10.3 功能实现/118 ...

Global site tag (gtag.js) - Google Analytics